How to re-use jQuery script inside the function on same page

I made a slider and everything work fine if I use 1 slider. Problem appear when I use 2 slider. The pagination and prev/next arrow can not work as is must. They pointing to second slider.

Here my script:

<script>
 $('.carmod17').each(function(){
 $(this).carouFredSel({ 
    responsive: true,
    pagination  : ".paginationbrand",                   
    prev: '.prev17',
    next: '.next17',
    auto: true,
    scroll: {
    duration: 1500,
    pauseOnHover: true  
  },
    items: {
    height: 'variable',                 
    visible: {
        min: 1,
        max: 1
  }
  }

  });
 });
</script>

The working code in jsfiddle is as shown below.

JSFIDDLE

NOTE: for some reason, I only need 1 class carmod17 and not adding class like carmod18, carmod19 etc. Would really appreciate your help.

Thank you.

Answers 1

  • Try this, Hope this helps..:)

    fiddle link https://jsfiddle.net/dozm474r/1/

    $('.carmod17').each(function(i) {
    
      var newClass = 'newClass' + i;
      var newNext = 'nextNew' + i;
      var newPrev = 'prevNew' + i;
      var newPage = 'paginationNew' + i;
    
    
      $(this).addClass(newClass)
        .parent().find('.next17')
        .addClass(newNext);
    
      $(this).parent().find('.prev17')
        .addClass(newPrev);
    
      $(this).parent().parent().find('.paginationbrand')
        .addClass(newPage);
    
      $('.' + newClass).carouFredSel({
        responsive: true,
        pagination: '.' + newPage,
        prev: '.' + newPrev,
        next: '.' + newNext,
        auto: true,
        scroll: {
          duration: 1500,
          pauseOnHover: true
        },
        items: {
          height: 'variable',
          visible: {
            min: 1,
            max: 1
          }
        }
    
      });
    });
    .module17 {
      position: relative;
    }
    #module17-wrapper {
      float: left;
      position: relative;
      width: 100%;
    }
    .list_carousel3 .prev17,
    .list_carousel3 .next17 {
      text-indent: -999px;
      display: block;
      overflow: hidden;
      width: 35px;
      height: 40px;
      position: absolute;
      -webkit-transition: all 0.4s ease-in-out;
      -moz-transition: all 0.4s ease-in-out;
      -o-transition: all 0.4s ease-in-out;
      -ms-transition: all 0.4s ease-in-out;
      transition: all 0.4s ease-in-out;
      opacity: 0;
    }
    #module17-wrapper:hover .prev17,
    #module17-wrapper:hover .next17 {
      opacity: 1;
    }
    .list_carousel3 .prev17 {
      right: 10px;
      bottom: 80px;
      background-image: url(http://www.clinique-veterinaire-du-corum.com/images/arrow-prev.png);
      background-repeat: no-repeat;
      background-color: #ff0;
      background-position: center center;
    }
    .list_carousel3 .prev17:hover {
      background-color: #ccc;
    }
    .list_carousel3 .next17 {
      right: 10px;
      bottom: 120px;
      background-image: url(http://www.clinique-veterinaire-du-corum.com/images/arrow-next.png);
      background-repeat: no-repeat;
      background-color: #fff;
      background-position: center center;
    }
    .list_carousel3 .next17:hover {
      background-color: #ccc;
    }
    .paginationbrand {
      position: absolute;
      bottom: 7px;
      width: 100%;
      z-index: 1;
    }
    .paginationbrand {
      text-align: center;
    }
    .paginationbrand a {
      background-color: rgba(0, 0, 0, 0.5);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin: 5px 5px 0 0;
      display: inline-block;
    }
    .paginationbrand a.selected {
      background-position: -25px -300px;
      cursor: default;
      background-color: #C44E00;
    }
    .darkarea .paginationbrand a {
      border: 1px solid#fff;
    }
    .darkarea .paginationbrand a.selected {
      border: 1px solid#fff;
      background-color: #fff;
    }
    .paginationbrand a span {
      display: none;
    }
    .wrapper-module17 {
      float: left;
      margin: 0;
      position: relative;
    }
    .module17-thumbnail {
      float: left;
      width: 100%;
      position: relative;
    }
    p {
      float: left;
      width: 100%;
      margin: 20px 0;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.1.0/jquery.carouFredSel.packed.js"></script>
    
    
    <h1>SLIDER NUMBER 1</h1>
    <div class="module17">
      <div class="list_carousel3 responsive">
        <div class="paginationbrand"></div>
        <div id="module17-wrapper">
          <div class="carmod17 slider">
            <div class="wrapper-module17">
              <div class="module17-thumbnail">
                <img src="http://www.catholicworldreport.com/Content/Site140/Blog/3992michaelange_00000003427.jpg" alt="">
              </div>
            </div>
    
            <div class="wrapper-module17">
              <div class="module17-thumbnail">
                <img src="https://www.childrenandnature.org/wp-content/uploads/2015/01/childrenglobe2.jpg" alt="">
              </div>
            </div>
    
            <div class="wrapper-module17">
              <div class="module17-thumbnail">
                <img src="https://zwonderland.files.wordpress.com/2013/10/milan-kundera.jpg" alt="">
              </div>
            </div>
    
    
          </div>
          <a class="prev17" href="#"></a>
          <a class="next17" href="#"></a>
        </div>
      </div>
    </div>
    
    <p>
    </p>
    <h1>SLIDER NUMBER 2</h1>
    <div class="module17">
      <div class="list_carousel3 responsive">
        <div class="paginationbrand"></div>
        <div id="module17-wrapper">
          <div class="carmod17 slider">
            <div class="wrapper-module17">
              <div class="module17-thumbnail">
                <img src="http://www.catholicworldreport.com/Content/Site140/Blog/3992michaelange_00000003427.jpg" alt="">
              </div>
            </div>
    
            <div class="wrapper-module17">
              <div class="module17-thumbnail">
                <img src="https://www.childrenandnature.org/wp-content/uploads/2015/01/childrenglobe2.jpg" alt="">
              </div>
            </div>
    
            <div class="wrapper-module17">
              <div class="module17-thumbnail">
                <img src="https://zwonderland.files.wordpress.com/2013/10/milan-kundera.jpg" alt="">
              </div>
            </div>
    
    
          </div>
          <a class="prev17" href="#"></a>
          <a class="next17" href="#"></a>
        </div>
      </div>
    </div>

    note: i would recommend avoid using same id's for multiple items
    

Related Articles