За последние 24 часа нас посетили 16536 программистов и 1642 робота. Сейчас ищут 1200 программистов ...

Jquery слайдер, как сменять только изображения

Тема в разделе "Сделайте за меня", создана пользователем Freeant, 26 янв 2015.

  1. Freeant

    Freeant Новичок

    С нами с:
    26 янв 2015
    Сообщения:
    1
    Симпатии:
    0
    Есть не плохой jquery слайдер - Super. Simple. Slider. (SSS)

    Он сменяет содержимое внутри родительского дива. Не обращая внимание на тип: текст или изображение.

    Например тут
    Код (Text):
    1. <div class="slider">
    2.  
    3. <div class="content">
    4. <img src="sofa1.jpg">
    5. <p>Фабрика</p>
    6. <p>Стиль</p>
    7. <img src="pic2.jpg">
    8. <img src="pic3.jpg">
    9. <p>Some text bla</p>
    10. </div>
    11.  
    12. <div class="content">
    13. <img src="sofa2.jpg">
    14. <p>Фабрика</p>
    15. <p>Стиль</p>
    16. <img src="pic2.jpg">
    17. <img src="pic3.jpg">
    18. <p>Some text bla</p>
    19. </div>
    20.  
    21. </div><!--.slider-->
    Как заставить его сменять только изображения в этом родительском диве?


    ---------------------------------------------------------------------

    Код (Text):
    1. <script>
    2. jQuery(function($) {
    3. $('.slider').sss();
    4. });
    5. </script>

    Код (Text):
    1. /** Super Simple Slider by @intllgnt **/
    2.  
    3. ;(function($, window, document, undefined ) {
    4.  
    5. $.fn.sss = function(options) {
    6.  
    7. // Options
    8.  
    9.     var settings = $.extend({
    10.     slideShow : true,
    11.     startOn : 0,
    12.     speed : 3500,
    13.     transition : 400,
    14.     arrows : true
    15.     }, options);
    16.  
    17.     return this.each(function() {
    18.  
    19. // Variables
    20.  
    21.     var
    22.     wrapper = $(this),
    23.     slides = wrapper.children().wrapAll('.sss').addClass('ssslide'),
    24.     slider = wrapper.find('.sss'),
    25.     slide_count = slides.length,
    26.     transition = settings.transition,
    27.     starting_slide = settings.startOn,
    28.     target = starting_slide > slide_count - 1 ? 0 : starting_slide,
    29.     animating = false,
    30.     clicked,
    31.     timer,
    32.     key,
    33.     prev,
    34.     next,
    35.  
    36. // Reset Slideshow
    37.  
    38.     reset_timer = settings.slideShow ? function() {
    39.     clearTimeout(timer);
    40.     timer = setTimeout(next_slide, settings.speed);
    41.     } : $.noop;
    42.  
    43. // Animate Slider
    44.  
    45.     function get_height(target) {
    46.     return ((slides.eq(target).height() / slider.width()) * 100) + '%';
    47.     }
    48.  
    49.     function animate_slide(target) {
    50.     if (!animating) {
    51.     animating = true;
    52.     var target_slide = slides.eq(target);
    53.  
    54.     target_slide.fadeIn(transition);
    55.     slides.not(target_slide).fadeOut(transition);
    56.  
    57.     slider.animate({paddingBottom: get_height(target)}, transition,  function() {
    58.     animating = false;
    59.     });
    60.  
    61.     reset_timer();
    62.  
    63.     }};
    64.  
    65. // Next Slide
    66.  
    67.     function next_slide() {
    68.     target = target === slide_count - 1 ? 0 : target + 1;
    69.     animate_slide(target);
    70.     }
    71.  
    72. // Prev Slide
    73.  
    74.     function prev_slide() {
    75.     target = target === 0 ? slide_count - 1 : target - 1;
    76.     animate_slide(target);
    77.     }
    78.  
    79.     if (settings.arrows) {
    80.     slider.append('<div class="sssprev"/>', '<div class="sssnext"/>');
    81.     }
    82.  
    83.     next = slider.find('.sssnext'),
    84.     prev = slider.find('.sssprev');
    85.  
    86.     $(window).load(function() {
    87.  
    88.     slider.css({paddingBottom: get_height(target)}).click(function(e) {
    89.     clicked = $(e.target);
    90.     if (clicked.is(next)) { next_slide() }
    91.     else if (clicked.is(prev)) { prev_slide() }
    92.     });
    93.  
    94.     animate_slide(target);
    95.  
    96.     $(document).keydown(function(e) {
    97.     key = e.keyCode;
    98.     if (key === 39) { next_slide() }
    99.     else if (key === 37) { prev_slide() }
    100.     });
    101.  
    102.     });
    103. // End
    104.  
    105. });
    106.  
    107. };
    108. })(jQuery, window, document);