Многопользовательский слайдер на странице sigle

Ранее я задал вопрос здесь: how to make image slider into while loop, но не смог найти правильный ответ.Многопользовательский слайдер на странице sigle

Теперь у меня есть модифицированный код. Он работает нормально. все же мне нужно упростить javascript и css. Может кто-нибудь мне помочь?.

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 


    <!-- jQuery (required) --> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script> 


    <!-- Anything Slider --> 
    <link rel="stylesheet" href="css/anythingslider.css"> 
    <script src="js/jquery.anythingslider.js"></script> 


    <!-- Define slider dimensions here --> 
    <style> 
    #slider1 { width: 200px; height: 250px; } 
    #slider2 { width: 200px; height: 250px; } 
    #slider3 { width: 200px; height: 250px; } 
    #slider4 { width: 200px; height: 250px; } 
    #slider5 { width: 200px; height: 250px; } 
    #slider6 { width: 200px; height: 250px; } 
    </style> 

    <!-- AnythingSlider initialization --> 
    <script> 
     // DOM Ready 
     $(function(){ 
      $('#slider1').anythingSlider(); 
     }); 

     $(function(){ 
      $('#slider2').anythingSlider(); 
     }); 

     $(function(){ 
      $('#slider3').anythingSlider(); 
     }); 

     $(function(){ 
      $('#slider4').anythingSlider(); 
     }); 

     $(function(){ 
      $('#slider5').anythingSlider(); 
     }); 

     $(function(){ 
      $('#slider6').anythingSlider(); 
     }); 
    </script> 

</head> 

<body id="simple"> 





<?php 
for($x=1;$x<=6;$x++){ 
$Slider="slider".$x; 
?> 

    <div id="<?php echo $Slider;?>"> 
     <li><img src="demos/images/slide-civil-1.jpg" alt=""></li> 

     <li><img src="demos/images/slide-env-1.jpg" alt=""></li> 

     <li><img src="demos/images/slide-civil-2.jpg" alt=""></li> 

     <li><img src="demos/images/slide-env-2.jpg" alt=""></li> 
    </div> 
<?php }?> 
    <!-- END AnythingSlider --> 


</body> 

</html>

источник

2016-01-21 yaseen ahmed

так что вы взяли чужого кода, и отправил новый вопрос, * rich *. –

Вместо того, чтобы использовать кучу идентификаторами, объединить их в один класс .slider

<style> 
    .slider { width: 200px; height: 250px; } 
</style>

$(function(){ 
    $('.slider').anythingSlider(); 
});

<?php 
for($x=1;$x<=6;$x++) { 
?> 

    <div class="slider"> 
     <li><img src="demos/images/slide-civil-1.jpg" alt=""></li> 

     <li><img src="demos/images/slide-env-1.jpg" alt=""></li> 

     <li><img src="demos/images/slide-civil-2.jpg" alt=""></li> 

     <li><img src="demos/images/slide-env-2.jpg" alt=""></li> 
    </div> 
<?php }?>

Если вам нужно, чтобы иметь возможность доступа к ним separatel у, вы можете сделать это

<?php 
for($x=1;$x<=6;$x++) { 
$Slider="slider".$x; 
?> 

    <div class="slider <?php echo $Slider;?>"> 
     <li><img src="demos/images/slide-civil-1.jpg" alt=""></li> 

     <li><img src="demos/images/slide-env-1.jpg" alt=""></li> 

     <li><img src="demos/images/slide-civil-2.jpg" alt=""></li> 

     <li><img src="demos/images/slide-env-2.jpg" alt=""></li> 
    </div> 
<?php }?>

Таким образом, вы сможете контролировать CSS, используя только один класс, но по-прежнему будет иметь возможность получить доступ к ним отдельно $('.slider'+sliderNumber).doSomething()

источник

2016-01-21 17:46:09 Minderov

есть работа прекрасный.thanks лот. –

@yaseenahmed Этот сайт проходит в обе стороны. Если вы ожидаете помощи, вы должны вознаградить тех, кто помогает вам, приняв их ответ. Прочитайте [Как работает прием ответа?] (Http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) –

Многопользовательский слайдер на странице sigle

ответ

Смежные вопросы