Home > Mobile >  Slick Slider does not work with Bootstrap Tab
Slick Slider does not work with Bootstrap Tab

Time：02-09

I want to slide the images using slick slider. I used the Bootstrap tab menu and each tab has to show a slick slider properly. But I have a problem. The first tab content shows slick slider without any problem but when I click the second tab it shows only one image. It does not work properly. How can I fix this problem?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <title>Focus Education</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd r5/ 6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
</head>
<style>
  * {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  body {
    padding: 15px;
    background-color: #35bb60;
  }
  
  div.your-class {
    opacity: 1;
  }
  
  .nav-tabs .nav-link {
    color: #fff;
  }
  
  .wrap-modal-slider {
    padding: 0 30px;
    opacity: 0;
    transition: all 0.3s;
  }
  
  .wrap-modal-slider.open {
    opacity: 1;
  }
  
  .your-class {
    width: 726px;
    margin: 0 auto;
    position: relative;
  }
  /* Arrows */
  
  .slick-prev,
  .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
  }
  
  .slick-prev:hover,
  .slick-prev:focus,
  .slick-next:hover,
  .slick-next:focus {
    color: transparent;
    outline: none;
    background: transparent;
  }
  
  .slick-prev:hover:before,
  .slick-prev:focus:before,
  .slick-next:hover:before,
  .slick-next:focus:before {
    opacity: 1;
  }
  
  .slick-prev.slick-disabled:before,
  .slick-next.slick-disabled:before {
    opacity: .25;
  }
  
  .slick-prev:before,
  .slick-next:before {
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .slick-prev {
    left: -25px;
  }
  
  [dir='rtl'] .slick-prev {
    right: -25px;
    left: auto;
  }
  
  .slick-prev:before {
    content: '←';
  }
  
  [dir='rtl'] .slick-prev:before {
    content: '→';
  }
  
  .slick-next {
    right: -25px;
  }
  
  [dir='rtl'] .slick-next {
    right: auto;
    left: -25px;
  }
  
  .slick-next:before {
    content: '→';
  }
  
  [dir='rtl'] .slick-next:before {
    content: '←';
  }
  /* Dots */
  
  .slick-dotted.slick-slider {
    margin-bottom: 30px;
  }
  
  .slick-dots {
    position: absolute;
    bottom: -25px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
  }
  
  .slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
  }
  
  .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
  }
  
  .slick-dots li button:hover,
  .slick-dots li button:focus {
    outline: none;
  }
  
  .slick-dots li button:hover:before,
  .slick-dots li button:focus:before {
    opacity: 1;
  }
  
  .slick-dots li button:before {
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: .25;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .slick-dots li.slick-active button:before {
    opacity: .75;
    color: black;
  }
</style>

<body>
  <ul  id="myTab" role="tablist">
    <li >
      <a  id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">New</a>
    </li>
    <li >
      <a  id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Popular</a>
    </li>
    <li >
      <a  id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Recommend</a>
    </li>
  </ul>
  <div  id="myTabContent">
    <div  id="home" role="tabpanel" aria-labelledby="home-tab">
      <div >
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
      </div>
    </div>
    <div  id="profile" role="tabpanel" aria-labelledby="profile-tab">
      <div >
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
      </div>
    </div>
    <div  id="contact" role="tabpanel" aria-labelledby="contact-tab">
      <div >
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
      </div>
    </div>
  </div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho j7jyWK8fNQe A12Hb8AhRq26LrZ/JpcUGGOn Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6 Zq HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
  $(document).ready(function() {
    $('.your-class').slick({
      infinite: true,
      slidesToShow: 3,
      slidesToScroll: 3
    });
  });

  $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    $('.your-class').slick('setPosition');
  })
</script>

</html>

CodePudding user response：

So my first impression was that there seemed to be a bit "too much" going on. I went through and simplified some things. The two biggest issues that caused it not to function as expected was you need to include active on each tab-pane class. Only include show on the "New" tab since that is the one you want to display on load.

Simplified JS ~

$(document).ready(function() {

    $('.your-class').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
    });
});

See it in action here ~ 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <title>Focus Education</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd r5/ 6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
</head>
<style>
  * {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  body {
    padding: 15px;
    background-color: #35bb60;
  }
  
  div.your-class {
    opacity: 1;
  }
  
  .nav-tabs .nav-link {
    color: #fff;
  }
  
  .wrap-modal-slider {
    padding: 0 30px;
    opacity: 0;
    transition: all 0.3s;
  }
  
  .wrap-modal-slider.open {
    opacity: 1;
  }
  
  .your-class {
    width: 726px;
    margin: 0 auto;
    position: relative;
  }
  /* Arrows */
  
  .slick-prev,
  .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
  }
  
  .slick-prev:hover,
  .slick-prev:focus,
  .slick-next:hover,
  .slick-next:focus {
    color: transparent;
    outline: none;
    background: transparent;
  }
  
  .slick-prev:hover:before,
  .slick-prev:focus:before,
  .slick-next:hover:before,
  .slick-next:focus:before {
    opacity: 1;
  }
  
  .slick-prev.slick-disabled:before,
  .slick-next.slick-disabled:before {
    opacity: .25;
  }
  
  .slick-prev:before,
  .slick-next:before {
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .slick-prev {
    left: -25px;
  }
  
  [dir='rtl'] .slick-prev {
    right: -25px;
    left: auto;
  }
  
  .slick-prev:before {
    content: '←';
  }
  
  [dir='rtl'] .slick-prev:before {
    content: '→';
  }
  
  .slick-next {
    right: -25px;
  }
  
  [dir='rtl'] .slick-next {
    right: auto;
    left: -25px;
  }
  
  .slick-next:before {
    content: '→';
  }
  
  [dir='rtl'] .slick-next:before {
    content: '←';
  }
  /* Dots */
  
  .slick-dotted.slick-slider {
    margin-bottom: 30px;
  }
  
  .slick-dots {
    position: absolute;
    bottom: -25px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
  }
  
  .slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
  }
  
  .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
  }
  
  .slick-dots li button:hover,
  .slick-dots li button:focus {
    outline: none;
  }
  
  .slick-dots li button:hover:before,
  .slick-dots li button:focus:before {
    opacity: 1;
  }
  
  .slick-dots li button:before {
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: .25;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .slick-dots li.slick-active button:before {
    opacity: .75;
    color: black;
  }
</style>

<body>
  <ul  id="myTab" role="tablist">
    <li >
      <a  id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">New</a>
    </li>
    <li >
      <a  id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Popular</a>
    </li>
    <li >
      <a  id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Recommend</a>
    </li>
  </ul>
  <div  id="myTabContent">
    <div  id="home" role="tabpanel" aria-labelledby="home-tab">
      <div >
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
      </div>
    </div>
    <div  id="profile" role="tabpanel" aria-labelledby="profile-tab">
      <div >
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
      </div>
    </div>
    <div  id="contact" role="tabpanel" aria-labelledby="contact-tab">
      <div >
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
      </div>
    </div>
  </div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho j7jyWK8fNQe A12Hb8AhRq26LrZ/JpcUGGOn Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6 Zq HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
$(document).ready(function() {

    $('.your-class').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
    });
});
</script>

</html>

Page link：https//www.codepudding.com/Mobile/293172.html

Prev:Assign a TimeZone to Dataframe Datetime Column
Next:Div is not fitting the space available
  •  Tags：  
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding