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


Пользователь месяца
TimurR TimurR 1-й за Август
Очков активности: 726 3 темы, 35 сообщений, 11 баллов репутации
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

    ShowPrint (ShowPrint.ru)
    Очков активности: 207 2 темы, 17 сообщений, 6 баллов репутации

  • Фотография Ixman
    #2

    Ixman (o5cat.ru)
    Очков активности: 105 0 тем, 10 сообщений, 7 баллов репутации

  • Фотография WGN
    #3

    WGN (worldgamenews.com)
    Очков активности: 90 Вне конкурса за определение пользователя месяца

  • Фотография magnet
    #4

    magnet (rbfxdirect.com)
    Очков активности: 67.5 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #5

    BLIK
    Очков активности: 45 Вне конкурса за определение пользователя месяца

  • Фотография TimurR
    #6

    TimurR
    Очков активности: 42 Вне конкурса за определение пользователя месяца

  • Фотография AnnaYa
    #7

    AnnaYa (topbase.ru)
    Очков активности: 33 2 темы, 5 сообщений, 2 балла репутации

  • Фотография Developer
    #8

    Developer
    Очков активности: 33 2 темы, 16 сообщений, 1 балл репутации

  • Фотография Алексей111
    #9

    Алексей111
    Очков активности: 28.5 5 тем, 4 сообщения, 1 балл репутации

  • Фотография Игорь Ку
    #10

    Игорь Ку (dudesday.ru)
    Очков активности: 24 1 тема, 5 сообщений, 2 балла репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 26.09.2018
Топ 5 участников по репутации


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

#1 fetfurmoz

fetfurmoz
  • Неактивные
  • 28 сообщений
  • Репутация: 1
0

Отправлено 30 January 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
  • 2882 сообщений
  • Репутация: 739

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

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


  • 0


#3 fetfurmoz

fetfurmoz
    Topic Starter
  • Неактивные
  • 28 сообщений
  • Репутация: 1

Отправлено 31 January 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