i transferring existing slider existing site new one, , didn't want waste additional time figuring out how create text slider scratch, since client wants same thing on new site.
i found code , modified bit work on new site. except doesn't works should. slider looks this:
var counter = 1; var total_width = 0; function slider_total_width() { $('.items a').each(function() { total_width += parseint($(this).width(), 10); }); $('.items').width(total_width); } slider_total_width(); function job_slider(wrapper) { var first_link = $('#active'); var width = first_link.width(); $(wrapper + ' a').each(function() { total_width += $(this).width() + 50; }); first_link.removeattr('id'); $(wrapper).animate({ left: '-=' + width }, 1000, function() { $(first_link).clone().appendto(wrapper); $(first_link).css('color', 'transparent'); var links = $(wrapper + ' a'); var new_first_link = links[counter]; counter++; $(new_first_link).attr('id', 'active'); $(wrapper).width(total_width); total_width = 0; }); } var activate = function() { job_slider('.items'); }; var interval = setinterval(activate, 5000); $('.items').hover(function() { clearinterval(interval); }, function() { interval = setinterval(activate, 5000); });.container { margin: 0 auto; width: 700px; } { text-decoration: none; } #ads_scroller .container { font-size: 0; position: relative; } #ads_scroller .icon_holder { display: inline-block; width: 3%; margin-top: 8px; } #ads_scroller .icon_holder { font-size: 22px; color: #fe9700; } #ads_scroller .scroller_container { display: inline-block; overflow: hidden; vertical-align: top; width: 97%; height: 31px; position: relative; } #ads_scroller .scroller_container .items { position: relative; display: block; } #ads_scroller .scrollable_title { position: relative; color: #727272; font-size: 14px; font-weight: 400; line-height: 41px; display: inline; white-space: nowrap; padding: 0 0 0 2px; box-sizing: border-box; } #ads_scroller .scrollable_title:last-of-type { margin-right: 0; } #ads_scroller #active.scrollable_title { color: #1a171b; } #ads_scroller .scrollable_title:hover { color: #555; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <div id="ads_scroller"> <div class="container"> <div class="icon_holder"><i class="fa fa-bell-o"></i> </div> <div class="scroller_container"> <div class="items" style="width: 2642px;"> <a href="#" class="scrollable_title" id="active">lorem ipsum dolor sit amet – </a> <a href="#" class="scrollable_title">consectetur adipisicing elit – </a> <a href="#" class="scrollable_title">incidunt tempore explicabo ea autem, eligendi excepturi – </a> <a href="#" class="scrollable_title">sapiente sint officiis non minima ex – </a> <a href="#" class="scrollable_title">tenetur provident, ipsum dignissimos autem earum nobis dolor – </a> <a href="#" class="scrollable_title">obcaecati iste animi cumque culpa – </a> <a href="#" class="scrollable_title">vero asperiores illum rerum – </a> <a href="#" class="scrollable_title">test see how announcements – </a> </div> </div> </div> </div>now think know issue is, don't know how fix it. reason, .items wrapper, if doesn't have set width, won't have links in 1 line, after while won't have links inside scroll.
strangely isn't set on client side , couldn't figure out css rule used allow (move left infinitely without width being set). circumvent i'm calculating total width, , setting each time slider clones element passed.
but (at least that's guess) after while gap between .items wrapper start on left (where icon is), , link slides in, becomes progressively bigger. after minute or gap becomes big.
so there way prevent this? doing wrong here? :\
hi try sample hope
<html> <head> <title>demo slider</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/css/bootstrap.min.css" /> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="container"> <div class="carousel slide carousel-fade" data-ride="carousel"> <div class="carousel-inner"> <div class="item active" > <div class="caption"> <a href="#" class="scrollable_title" id="active">lorem ipsum dolor sit amet – </a> <a href="#" class="scrollable_title">consectetur adipisicing elit – </a> <a href="#" class="scrollable_title">incidunt tempore explicabo ea autem, eligendi excepturi – </a> <a href="#" class="scrollable_title">sapiente sint officiis non minima ex – </a> <a href="#" class="scrollable_title">tenetur provident, ipsum dignissimos autem earum nobis dolor – </a> <a href="#" class="scrollable_title">obcaecati iste animi cumque culpa – </a> <a href="#" class="scrollable_title">vero asperiores illum rerum – </a> <a href="#" class="scrollable_title">test see how announcements – </a> </div> </div> <div class="item " > <div class="caption"> <a href="#" class="scrollable_title" id="active">lorem ipsum dolor sit amet – </a> <a href="#" class="scrollable_title">consectetur adipisicing elit – </a> <a href="#" class="scrollable_title">incidunt tempore explicabo ea autem, eligendi excepturi – </a> <a href="#" class="scrollable_title">sapiente sint officiis non minima ex – </a> <a href="#" class="scrollable_title">tenetur provident, ipsum dignissimos autem earum nobis dolor – </a> <a href="#" class="scrollable_title">obcaecati iste animi cumque culpa – </a> <a href="#" class="scrollable_title">vero asperiores illum rerum – </a> <a href="#" class="scrollable_title">test see how announcements – </a> </div> </div> <div class="item" > <div class="caption"> <a href="#" class="scrollable_title" id="active">lorem ipsum dolor sit amet – </a> <a href="#" class="scrollable_title">consectetur adipisicing elit – </a> <a href="#" class="scrollable_title">incidunt tempore explicabo ea autem, eligendi excepturi – </a> <a href="#" class="scrollable_title">sapiente sint officiis non minima ex – </a> <a href="#" class="scrollable_title">tenetur provident, ipsum dignissimos autem earum nobis dolor – </a> <a href="#" class="scrollable_title">obcaecati iste animi cumque culpa – </a> <a href="#" class="scrollable_title">vero asperiores illum rerum – </a> <a href="#" class="scrollable_title">test see how announcements – </a> </div> </div> </div> </div> </div> </body> </html> 
Comments
Post a Comment