Перейти к содержимому

Реферальная программа Мегаплана

Партнерская программа Kredov

2 слайдера на одной странице

#1 fetfurmoz

fetfurmoz
  • Пользователь
  • 28 сообщений
  • Репутация: 1
0

Отправлено 30 Январь 2015 - 20:07

Всем здрасте.

 

Есть слайдер, который надо установить в двух местах на странице, устанавливаю 1 работает, ставлю такой же 2й не работает.

Подскажите пжл. где надо добавить что бы работало 2,3,4,5 слайдеров??? help помогите.

   <ul id="my_slider">
		  <li><img src="data_images/b.jpg" alt="" /></li>  
		  <li><img src="data_images/b0.jpg" alt="" /></li>  
		  <li><img src="data_images/b1.jpg" alt="" /></li>  
	  </ul>
/*My slider styles*/
#my_slider {
    width:866px;
    height:687px;
    overflow: hidden;
    position:relative;
    list-style: none outside none;
    padding:0;    
}
#my_slider li {
    position: absolute;
    top: 0px;
    left: 0px;
    display:none;
}
#my_slider li:first-child {
    display:block;
}

(function($){
    $.fn.MySlider = function(interval) {
        var slides;
        var cnt;
        var amount;
        var i;

        function run() {
            // hiding previous image and showing next
            $(slides[i]).fadeOut(1000);
            i++;
            if (i >= amount) i = 0;
            $(slides[i]).fadeIn(1000);

            // updating counter
            cnt.text(i+1+' / '+amount);

            // loop
            setTimeout(run, interval);
        }

        slides = $('#my_slider').children();
        cnt = $('#counter');
        amount = slides.length;
        i=0;

        // updating counter
        cnt.text(i+1+' / '+amount);

        setTimeout(run, interval);
    };
})(jQuery);

// custom initialization
jQuery(window).load(function() {
    $('.smart_gallery').MySlider(3000);
});

 

 

  • 0

#2 Ixman

Ixman
  • Пользователь PRO
  • 2 159 сообщений
  • Репутация: 432

Отправлено 30 Январь 2015 - 20:15

<ul id="my_slider"> пробуйте второму слайдеру задать другой идентификатор, и также не забудьте его заменить в коде jQuery 


  • 0

#3 fetfurmoz

fetfurmoz
    Topic Starter
  • Пользователь
  • 28 сообщений
  • Репутация: 1

Отправлено 31 Январь 2015 - 09:57

Спс. за помощь. Решение выкладываю

<link rel="stylesheet" href="css/main.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

<div class="example">
    <h3><a href="#">My Slider example</a></h3>
    <ul class="my_slider">
      <li><img src="data_images/pic1.jpg" alt="" /></li>  
      <li><img src="data_images/pic2.jpg" alt="" /></li>  
      <li><img src="data_images/pic3.jpg" alt="" /></li>  
      <li><img src="data_images/pic4.jpg" alt="" /></li>  
      <li><img src="data_images/pic5.jpg" alt="" /></li>  
      <li><img src="data_images/pic6.jpg" alt="" /></li>  
      <li><img src="data_images/pic7.jpg" alt="" /></li>  
      <li><img src="data_images/pic8.jpg" alt="" /></li>  
      <li><img src="data_images/pic9.jpg" alt="" /></li>  
      <li><img src="data_images/pic10.jpg" alt="" /></li>  
    </ul>
    <div class="counter"></div>
</div>

<div class="example">
    <h3><a href="#">My Slider example</a></h3>
    <ul class="my_slider2">
      <li><img src="data_images/pic1.jpg" alt="" /></li>  
      <li><img src="data_images/pic2.jpg" alt="" /></li>  
      <li><img src="data_images/pic3.jpg" alt="" /></li>  
      <li><img src="data_images/pic7.jpg" alt="" /></li>  
      <li><img src="data_images/pic8.jpg" alt="" /></li>  
      <li><img src="data_images/pic9.jpg" alt="" /></li>  
      <li><img src="data_images/pic10.jpg" alt="" /></li>  
    </ul>
    <div class="counter2"></div>
</div>

<hr style="clear:both;" />
<h4><a href="http://www.script-tutorials.com/create-your-own-jquery-plugin-slider/">back to original article page</a></h4>
body{background:#eee;margin:0;padding:0}
.example{background:#FFF;width:500px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}

/*My slider styles*/
.my_slider2,
.my_slider {
    width:500px;
    height:340px;
    overflow: hidden;
    position:relative;
    list-style: none outside none;
    padding:0;
    margin:0;
}
.my_slider2 li,
.my_slider li {
    position: absolute;
    top: 0px;
    left: 0px;
    display:none;
}
.my_slider2 li:first-child,
.my_slider li:first-child {
    display:block;
}

.counter2,
.counter {
    text-align:right;
    font-size:16px;
    width:500px;
}
(function($){
    $.fn.MySlider = function(interval) {
        var slides;
        var cnt;
        var slides2;
        var cnt2;
        var amount;
        var i;
        var i2;

        function run() {
            // hiding previous image and showing next
            $(slides[i]).fadeOut(1000);
            $(slides2[i2]).fadeOut(1000);
            i++;
            i2++;
            if (i >= amount) i = 0;
            if (i2 >= amount2) i2 = 0;

            $(slides[i]).fadeIn(1000);
            $(slides2[i2]).fadeIn(1000);

            // updating counter
            cnt.text(i+1+' / '+amount);
            cnt2.text(i2+1+' / '+amount2);

            // loop
            setTimeout(run, interval);
        }

        slides = $('.my_slider li');
        slides2 = $('.my_slider2 li');
        cnt = $('.counter');
        cnt2 = $('.counter2');
        amount = slides.length;
        amount2 = slides2.length;
        i=0;
        i2=0;

        // updating counter
        cnt.text(i+1+' / '+amount);
        cnt2.text(i2+1+' / '+amount2);

        setTimeout(run, interval);
    };
})(jQuery);

jQuery(window).load(function() {
    $('body').MySlider(3000);
});

  • 0


Оформление форума – IPBSkins.ru