Блог

Главная - Вопросы по программированию - два слайдера изображений на одной странице

два слайдера изображений на одной странице

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Привет, друзья, я пытаюсь создать два слайдера изображений на одной странице с помощью jquery, но при запуске этого файла в браузере возникают некоторые проблемы. Вот мой код

HTML

 <div id="projects">
    <div id="completed">
    <div class="button-previous">prev</div>
        <div class="button-next">next</div>
     <div class="slider-wrapper">

            <div class="slider">
          <div class="sp" style="background: blue;">akjdfalfkdj</div>
          <div class="sp" style="background: yellow;">akjdfautlfkdkjkhkj</div>
          <div class="sp" style="background: green;" >akjdfalfkdiyukjkhkj</div>
      <div class="sp" style="background: red;">akjdfalfkdkkljjkhkj</div>
            </div>
          </div>



     </div>
     <div id="notcompleted">
         <div class="button-previous-notcmpt">prev</div>
         <div class="button-next-notcmpt">next</div>
     <div class="slider-wrapper">

            <div class="slider">
          <div class="sp-notcmpt" style="background: blue;">akjdfalfkdj</div>
      <div class="sp-notcmpt" style="background: yellow;">akjdfautlfkdkjkhkj</div>
     <div class="sp-notcmpt" style="background: green;" >akjdfalfkdiyukjkhkj</div>
     <div class="sp-notcmpt" style="background: red;">akjdfalfkdkkljjkhkj</div>
            </div>
           </div>

       </div>

……………………………………………………………………………….

css

     .slider-wrapper 
         {width:300px; height:250px;margin:15px;margin-left:25px  }
    .slider 
       {width:225px; height:225px; position:relative;}
  .sp 
  {width:250px; height:250px; position:absolute;}


  .button-previous 
     {margin-top:120px;float:left;}
  .button-next
      {margin-top:120px;float:right;}
   .button-previous-notcmpt
   {margin-top:120px;float:left}
  .button-next-notcmpt 
      {margin-top:120px;float:right;}
   .sp-notcmpt 
       {width:250px; height:250px; position:absolute;}
   div#completed{
    width: 300px;
    height: 300px;
    float: left;
    border: solid black 1px;
    overflow: hidden;


   } 
    div#notcompleted{
    width: 300px;
    height: 300px;
    float: right;
    border: solid black 1px;

    }

    div#recentprojects{
    height: 35px;
    border: dotted green 0px;
    text-align: center;
    background-color: #0e3e6e;
    color: #ffffff;
    font-family: arial,normal;
    line-height: 33px;
   }

скрипт

     $(document).ready(function(){
            if($('#completed')){
            $('.sp').first().addClass('active');
           $('.sp').hide();    
           $('.active').show();

    $('.button-next').click(function(){

    $('.active').removeClass('active').addClass('oldActive');    
                   if ( $('.oldActive').is(':last-child')) {
        $('.sp').first().addClass('active');
        }
        else{
        $('.oldActive').next().addClass('active');
        }
    $('.oldActive').removeClass('oldActive');
    $('.sp').fadeOut();
    $('.active').fadeIn();


    });

       $('.button-previous').click(function(){
    $('.active').removeClass('active').addClass('oldActive');    
           if ( $('.oldActive').is(':first-child')) {
        $('.sp').last().addClass('active');
        }
           else{
    $('.oldActive').prev().addClass('active');
           }
    $('.oldActive').removeClass('oldActive');
    $('.sp').fadeOut();
    $('.active').fadeIn();
    });
    }
    if($('#notcompleted')){
       $('.sp-notcmpt').first().addClass('active');
       $('.sp-notcmpt').hide();    
       $('.active').show();
    $('.button-next-notcmpt').click(function(){

    $('.active').removeClass('active').addClass('oldActive');    
                   if ( $('.oldActive').is(':last-child')) {
        $('.sp-notcmpt').first().addClass('active');
        }
        else{
        $('.oldActive').next().addClass('active');
        }
    $('.oldActive').removeClass('oldActive');
    $('.sp-notcmpt').fadeOut();
    $('.active').fadeIn();


    });

       $('.button-previous-notcmpt').click(function(){
    $('.active').removeClass('active').addClass('oldActive');    
           if ( $('.oldActive').is(':first-child')) {
        $('.sp-notcmpt').last().addClass('active');
        }
           else{
    $('.oldActive').prev().addClass('active');
           }
    $('.oldActive').removeClass('oldActive');
    $('.sp-notcmpt').fadeOut();
    $('.active').fadeIn();
    });
    }

});

Комментарии:

1. просьба помочь мне найти мою ошибку в коде

2. Не могли бы вы уточнить, какие проблемы вы почувствовали?

3. Какая ошибка консоли есть в браузере?

4. Ошибок консоли нет. теперь расскажите, что требуется по коду.

5. изображения в обоих слайдерах скользят одним щелчком мыши

Ответ №1:

попробуйте скрипт.

  $(document).ready(function(){
            if($('#completed')){
            $('#completed .sp').first().addClass('active');
           $('#completed .sp').hide();    
           $('#completed .active').show();

    $('#completed .button-next').click(function(){

    $('#completed .active').removeClass('active').addClass('oldActive');    
                   if ( $('#completed .oldActive').is(':last-child')) {
        $('#completed .sp').first().addClass('active');
        }
        else{
        $('#completed .oldActive').next().addClass('active');
        }
    $('#completed .oldActive').removeClass('oldActive');
    $('#completed .sp').fadeOut();
    $('#completed .active').fadeIn();


    });

       $('#completed .button-previous').click(function(){
    $('#completed .active').removeClass('active').addClass('oldActive');    
           if ( $('#completed .oldActive').is(':first-child')) {
        $('#completed .sp').last().addClass('active');
        }
           else{
    $('#completed .oldActive').prev().addClass('active');
           }
    $('#completed .oldActive').removeClass('oldActive');
    $('#completed .sp').fadeOut();
    $('#completed .active').fadeIn();
    });
    }

    if($('#notcompleted')){
       $('#notcompleted .sp-notcmpt').first().addClass('active');
       $('#notcompleted .sp-notcmpt').hide();    
       $('#notcompleted .active').show();
    $('#notcompleted .button-next-notcmpt').click(function(){

    $('#notcompleted .active').removeClass('active').addClass('oldActive');    
                   if ( $('#notcompleted .oldActive').is(':last-child')) {
        $('#notcompleted .sp-notcmpt').first().addClass('active');
        }
        else{
        $('#notcompleted .oldActive').next().addClass('active');
        }
    $('#notcompleted .oldActive').removeClass('oldActive');
    $('#notcompleted .sp-notcmpt').fadeOut();
    $('#notcompleted .active').fadeIn();


    });

       $('#notcompleted .button-previous-notcmpt').click(function(){
    $('#notcompleted .active').removeClass('active').addClass('oldActive');    
           if ( $('#notcompleted .oldActive').is(':first-child')) {
        $('#notcompleted .sp-notcmpt').last().addClass('active');
        }
           else{
    $('#notcompleted .oldActive').prev().addClass('active');
           }
    $('#notcompleted .oldActive').removeClass('oldActive');
    $('#notcompleted .sp-notcmpt').fadeOut();
    $('#notcompleted .active').fadeIn();
    });
    }

});

Также проверьте, включена ли библиотека jquery 

 <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

Комментарии:

1. @mirajrjaee, правильный ли ответ? если да, то, пожалуйста, примите как правильный ответ и проголосуйте 1.

2. @ Pratik Joshi ответ был правильным. Спасибо, у меня недостаточно репутации, чтобы проголосовать за ваш ответ. Я только начал со stakoverflow… Спасибо

3. @mirajrjaee добро пожаловать. Вы можете принять ответ как правильный, нажав на галочку слева