"Slick Image Gallery"
Bootstrap 3.3.0 Snippet by marckgiovi

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/u/20883000/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/u/20883000/slick/slick-theme.css"/> <script type="text/javascript" src="https://dl.dropboxusercontent.com/u/20883000/slick/slick.min.js"></script> </head> <body> <div class="container" style="width:500px"> <div class="slider slider-for"> <div><iframe src="https://www.youtube.com/embed/-Q9N6AtH9PQ?showinfo=0&controls=0" width=500 height=300 frameborder="0"></iframe></div> <div><img width=500 height=300 src="http://www.lastminute.com/content/dam/site_gb/Theatre/shows/wicked/WICKED_Lastminute_400x300.jpg" alt="Wicked"></div> <div><img width=500 height=300 src="http://www.lastminute.com/content/dam/site_gb/Theatre/shows/wicked/WICKED_Lastminute_400x300.jpg" alt="Wicked"></div> <div><img width=500 height=300 src="http://www.lastminute.com/content/dam/site_gb/Theatre/shows/wicked/WICKED_Lastminute_400x300.jpg" alt="Wicked"></div> <div><img width=500 height=300 src="http://www.lastminute.com/content/dam/site_gb/Theatre/shows/wicked/WICKED_Lastminute_400x300.jpg" alt="Wicked"></div> <div><img width=500 height=300 src="http://www.lastminute.com/content/dam/site_gb/Theatre/shows/wicked/WICKED_Lastminute_400x300.jpg" alt="Wicked"></div> <div><img width=500 height=300 src="http://www.lastminute.com/content/dam/site_gb/Theatre/shows/wicked/WICKED_Lastminute_400x300.jpg" alt="Wicked"></div> <div><img width=500 height=300 src="http://www.lastminute.com/content/dam/site_gb/Theatre/shows/wicked/WICKED_Lastminute_400x300.jpg" alt="Wicked"></div> <div><img width=500 height=300 src="http://www.lastminute.com/content/dam/site_gb/Theatre/shows/wicked/WICKED_Lastminute_400x300.jpg" alt="Wicked"></div> <div><img width=500 height=300 src="http://www.lastminute.com/content/dam/site_gb/Theatre/shows/wicked/WICKED_Lastminute_400x300.jpg" alt="Wicked"></div> </div> <div class="slider slider-nav"> <div><img width=120 height=90 src="https://img.youtube.com/vi/-Q9N6AtH9PQ/3.jpg" alt="Wicked"></div> <div><img width=120 height=90 src="http://www.lastminute.com/content/dam/site_gb/Theatre/shows/wicked/WICKED_Lastminute_400x300.jpg" alt="Wicked"></div> <div><img width=120 height=90 src="http://www.lastminute.com/content/dam/site_gb/Theatre/shows/wicked/WICKED_Lastminute_400x300.jpg" alt="Wicked"></div> <div><img width=120 height=90 src="http://www.lastminute.com/content/dam/site_gb/Theatre/shows/wicked/WICKED_Lastminute_400x300.jpg" alt="Wicked"></div> <div><img width=120 height=90 src="http://www.lastminute.com/content/dam/site_gb/Theatre/shows/wicked/WICKED_Lastminute_400x300.jpg" alt="Wicked"></div> <div><img width=120 height=90 src="http://www.lastminute.com/content/dam/site_gb/Theatre/shows/wicked/WICKED_Lastminute_400x300.jpg" alt="Wicked"></div> <div><img width=120 height=90 src="http://www.lastminute.com/content/dam/site_gb/Theatre/shows/wicked/WICKED_Lastminute_400x300.jpg" alt="Wicked"></div> <div><img width=120 height=90 src="http://www.lastminute.com/content/dam/site_gb/Theatre/shows/wicked/WICKED_Lastminute_400x300.jpg" alt="Wicked"></div> <div><img width=120 height=90 src="http://www.lastminute.com/content/dam/site_gb/Theatre/shows/wicked/WICKED_Lastminute_400x300.jpg" alt="Wicked"></div> <div><img width=120 height=90 src="http://www.lastminute.com/content/dam/site_gb/Theatre/shows/wicked/WICKED_Lastminute_400x300.jpg" alt="Wicked"></div> </div> </div> <script type="text/javascript"> $('.slider-for').slick({ slidesToShow: 1, slidesToScroll: 1, arrows: true, fade: true, speed: 1000, asNavFor: '.slider-nav' }); $('.slider-nav').slick({ slidesToShow: 3, slidesToScroll: 1, asNavFor: '.slider-for', dots: true, centerMode: true, focusOnSelect: true, // autoplay: true, // autoplaySpeed: 2000 }); </script> </body> </html>
.slick-next, .slick-prev { z-index: 5; } .slick-next { margin-right: 25px !important; } .slick-prev { margin-left: 25px !important; } .slider-nav .slick-slide { opacity: 0.7; } .slider-nav .slick-current { opacity: 1; }

Related: See More

Material Kit React
arrow key navigation thumbnail gallery modal view
Image Crop jQuery
masonry Image Gallery

Questions / Comments: