"Slick Image Gallery v2"
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:565px; display:flex"> <div class="slider slider-for" style="width:595px;"> <div><iframe src="https://www.youtube.com/embed/-Q9N6AtH9PQ?showinfo=0&controls=0" width=595 height=376 frameborder="0"></iframe></div> <div><iframe src="https://www.youtube.com/embed/nrpLayS57cY?showinfo=0&controls=0" width=595 height=376 frameborder="0"></iframe></div> <div><img width=595 height=376 src="http://www.lastminute.com/content/dam/site_gb/Theatre/shows/wicked/WICKED_Lastminute_400x300.jpg" alt="Wicked"></div> <div><img width=595 height=376 src="http://www.lastminute.com/content/dam/site_gb/Theatre/shows/wicked/WICKED_Lastminute_400x300.jpg" alt="Wicked"></div> <div><img width=595 height=376 src="http://www.lastminute.com/content/dam/site_gb/Theatre/shows/wicked/WICKED_Lastminute_400x300.jpg" alt="Wicked"></div> <div><img width=595 height=376 src="http://www.lastminute.com/content/dam/site_gb/Theatre/shows/wicked/WICKED_Lastminute_400x300.jpg" alt="Wicked"></div> <div><img width=595 height=376 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" style="width:150px"> <div><img width=150 height=90 src="https://img.youtube.com/vi/-Q9N6AtH9PQ/3.jpg" alt="Wicked"></div> <div><img width=150 height=90 src="https://img.youtube.com/vi/nrpLayS57cY/0.jpg" alt="Wicked"></div> <div><img width=150 height=90 src="http://www.lastminute.com/content/dam/site_gb/Theatre/shows/wicked/WICKED_Lastminute_400x300.jpg" alt="Wicked"></div> <div><img width=150 height=90 src="http://www.lastminute.com/content/dam/site_gb/Theatre/shows/wicked/WICKED_Lastminute_400x300.jpg" alt="Wicked"></div> <div><img width=150 height=90 src="http://www.lastminute.com/content/dam/site_gb/Theatre/shows/wicked/WICKED_Lastminute_400x300.jpg" alt="Wicked"></div> <div><img width=150 height=90 src="http://www.lastminute.com/content/dam/site_gb/Theatre/shows/wicked/WICKED_Lastminute_400x300.jpg" alt="Wicked"></div> <div><img width=150 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: false, centerMode: true, focusOnSelect: true, vertical: true, arrows: false }); </script> </body> </html>
.slick-next, .slick-prev { z-index: 5; } .slick-next { margin-right: 45px !important; } .slick-prev { margin-left: 25px !important; } .slider-nav .slick-slide { cursor: pointer; } .slider-nav .slick-current { opacity: 0.7; } .slick-prev:before, .slick-next:before { font-size: 40px !important; }

Related: See More

Rotating CSS Card
arrow key navigation thumbnail gallery modal view
Image Crop jQuery
masonry Image Gallery

Questions / Comments: