"slick sider with go to tabs with issues fixed"
Bootstrap 4.1.1 Snippet by lavan

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html> <head> <title>Slick Playground</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="./slick/slick.css"> <link rel="stylesheet" type="text/css" href="./slick/slick-theme.css"> <style type="text/css"> html, body { margin: 0; padding: 0; } * { box-sizing: border-box; } .slider { width: 100%; margin: 50px auto; } .slick-slide { margin: 0px 5px; } .slick-slide img { width: 70%; display: block; margin: auto; } .slick-prev:before, .slick-next:before { color: black; } .slick-slide { transition: all ease-in-out .3s; opacity: 0.5; } .slick-active { opacity: .5; } slick-active img{ opacity: .5; } .slick-center img{ width:100% !important; } .slick-current { opacity: 1; } .slick-next { right: 15%; } .slick-prev { left: 15%; position: absolute; z-index: 999; } </style> <style> .main { font-family: Arial; width: 100%; display: block; margin: 0 auto; overflow: hidden; } h3 { background: #fff; color: #3498db; font-size: 36px; line-height: 100px; margin: 10px; padding: 2%; position: relative; text-align: center; } .action{ display:block; margin:100px auto; width:100%; text-align:center; } .action a { display:inline-block; padding:5px 10px; background:#f30; color:#fff; text-decoration:none; opacity: 0.4; } .action .active{ opacity: 1; } .action a:hover{ background:#000; } .slick-prev, .slick-next { top: 75%; width: 50px; height: 50px; } </style> </head> <body> <div class="main"> <div class="slider slider-nav"> <div><img src="main.png"></div> <div><img src="main.png"></div> <div><img src="main.png"></div> <div><img src="main.png"></div> <div><img src="main.png"></div> </div> <div class="action"> <a href="#" data-slide="1" class="thumb active">go to slide 1<br> <img src="main.png" style="width:50px;"></a> <a href="#" data-slide="2" class="thumb">go to slide 2 <br> <img src="main.png" style="width:50px;"></a> <a href="#" data-slide="3" class="thumb">go to slide 3 <br> <img src="main.png" style="width:50px;"></a> <a href="#" data-slide="4" class="thumb">go to slide 4 <br> <img src="main.png" style="width:50px;"></a> <a href="#" data-slide="5" class="thumb">go to slide 5 <br> <img src="main.png" style="width:50px;"></a> </div> </div> <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script> <script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script> <script> $('.slider-nav').slick({ slidesToShow: 3, slidesToScroll: 1, centerMode: true, dots: false, focusOnSelect: true, prevArrow:"<img class='a-left control-c prev slick-prev' src='previous.png'>", nextArrow:"<img class='a-right control-c next slick-next' src='next.png'>" }); $('a[data-slide]').click(function(e) { $(".thumb").removeClass("active"); e.preventDefault(); var slideno = $(this).data('slide'); $('.slider-nav').slick('slickGoTo', slideno - 1); $(this).toggleClass("active"); }); $(".slider").click(function(){ setTimeout(function(){ $("a[data-slide]").removeClass("active") var activedElementIndex=$(".slick-current.slick-active").data("slick-index"); $("a[data-slide]:eq("+activedElementIndex+")").toggleClass("active") },0) }) </script> </body> </html>

Related: See More

Paper Kit
Tabs style 1
Bootstrap Tabs with Table
Bootstrap V4 Side Toggle and Fixed Top Menu (Responsive)

Questions / Comments: