"custom widget slider "
Bootstrap 4.1.1 Snippet by saddamSaifi1992

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="container"> <div class="row"> <h2> custom widget slider </h2> </div> </div> <div class="col-md-6"> <div class="box text-center"> <div class="row"> <div class="col-md-2"> <a class="pointer sliderarrow " id="left"> <i class="fa -chevron-left"></i> </a> </div> <div class="col-md-8"> <img src="http://spinksimpex.com/test/sample/1.jpg" id="imageDisplay" alt="-1" width="400px"> </div> <div class="col-md-2"> <a class="pointer sliderarrow" id="right"> <i class="fa -chevron-right"></i> </a> </div> </div> <div class="col-md-8 offset-md-2"> <ul class="smal_sample"> <li><img src="https://image.freepik.com/free-photo/cityscape-with-seagulls-black-white-photo-with-film-grain-effect_1401-369.jpg" class="gallery"></li> <li><img src="https://image.freepik.com/free-photo/milford-sound-new-zealand-travel-destination-concept_53876-42945.jpg" class="gallery"></li> <li><img src="https://image.freepik.com/free-photo/old-wooden-door-with-bougainvillea_1401-306.jpg" class="gallery"></li> <li><img src="https://image.freepik.com/free-photo/mountain-journey_1163-3320.jpg" class="gallery"></li> </ul> </div> </div> </div>
.box { width: 100%; height: 550px; border: 4px double #cccccc29; } ul{ list-style:none; } ul.smal_sample li { width: 24.1%; float: left; margin: 0 0.4%; border: 1px solid #ccc; } ul.smal_sample li img { width: 100%; } .sliderarrow { position: absolute; top: 200px; background: red; width: 40px; height: 40px; font-size: 25px; left: 34px; color: #fff !important; padding: 2px; border-radius: 50px; }
$(function(){ var smalslider = (function(na=""){ var left = $('#left'); var right = $('#right'); var img = $('#imageDisplay'); var n; if (na=="") { n = img.attr('alt'); }else{ n = na; } if (n < -2) { n ="-1"; } if (n >= 3) { n =n-4; } n++; left.attr('alt',n); right.attr('alt',n); img.attr('alt',n); $(".smal_sample li").removeClass('active'); $(".smal_sample li:eq("+n+")").addClass('active'); img.hide(); var s_img = $(".gallery:eq("+n+")").attr('src'); img.attr('src',s_img); img.show(); }); setInterval(function(){smalslider(); }, 2000); $(document.body).on('click', '#left', function(event) { event.preventDefault(); var num = parseInt($(this).attr('alt')); num +=2; $(this).hide(); smalslider(num); $(this).show(); }); $(document.body).on('click', '#right', function(event) { event.preventDefault(); var num = $(this).attr('alt'); $(this).hide(); smalslider(num); $(this).show(); }); $(document.body).on('click', '.gallery', function(event) { var num = $(this).attr('alt'); smalslider(num); }); smalslider(); $('.gallery').each(function(index, el) { index -=1; $(this).attr('alt',index); }); });

Related: See More


Questions / Comments: