jQuery komut dosyasını aynı sayfadaki işlev içinde yeniden kullanma

Question

1 kaydırıcıyı kullanırsam bir kaydırıcı yaptım ve her şey iyi çalışıyor. 2 kaydırıcı kullandığımda sorun görünüyor. Sayfalandırma ve önceki/sonraki ok gerektiği gibi çalışmayabilir. İkinci sürgüyü işaret ediyorlar. İşte

benim komut dosyası:

<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> 

jsfiddle işçi kod aşağıda gösterildiği gibi.

JSFIDDLE

NOT: nedense, sadece 1 sınıf carmod17 ve carmod18 gibi ekleyerek değil sınıfını, carmod19 vb Gerçekten yardımına takdir ederim gerekir.

Teşekkür ederiz.

Answer 1

bu deneyin css ve HTML değiştirmek için aynı sınıfları kullanıyor .. :)

keman bağlantı 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 

Answer 2

Sen, Umut bu yardımcı olur onlara farklı sınıflar isimler vermek ve buna göre

$('.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 
         } 
        } 

    }); 
}); 

$('.carmod18').each(function(){ 
    $(this).carouFredSel({ 
        responsive: true, 
        pagination : ".paginationbrand",     
        prev: '.prev18', 
        next: '.next18', 
        auto: true, 
        scroll: { 
        duration: 1500, 
        pauseOnHover: true 
         }, 
        items: { 
        height: 'variable',     
        visible: { 
         min: 1, 
         max: 1 
         } 
        } 

    }); 
}); 

http://jsfiddle.net/pxM45/380/