Задать вопрос
@sochi-russia
javascript

Как добавить Product4 и Product5 в скрипт?

Здравствуйте
Есть скрипт
$(document).ready(function(){
    counter = 2; // for product 2
    
    $(".next").click(function(){
        if(counter == 1)
        {
            $(".product1").fadeOut(500);
            $(".product2").fadeIn(500);
            $(".h1").animate({top:"-30%"});
            $(".h2").animate({top:"50%"});
            counter = 2;
        }
        else if(counter == 2)
        {
            $(".product2").fadeOut(500);
            $(".product3").fadeIn(500);
            $(".h2").animate({top:"-30%"});
            $(".h3").animate({top:"50%"});
            counter = 3;
        }
    });
    
    $(".pre").click(function(){
        if(counter == 2)
        {
            $(".product2").fadeOut(500);
            $(".product1").fadeIn(500);
            $(".h1").animate({top:"50%"});
            $(".h2").animate({top:"130%"});
            counter = 1;
        }
        else if(counter == 3)
        {
            $(".product3").fadeOut(500);
            $(".product2").fadeIn(500);
            $(".h2").animate({top:"50%"});
            $(".h3").animate({top:"130%"});
            counter = 2;
        }
    });      
});

Как правильно добавить product4 и product5 в скрипт?

<div id="main">
            <div class="imgSection">
                <img src="https://site.ru/image/plane1.png" class="headphone h1 rotone"/>  
                <img src="https://site.ru/image/plane2.png" class="headphone h2 rottwo"/>  
                <img src="https://site.ru/image/plane.png" class="headphone h3 rotthree"/>  
                <img src="https://site.ru/image/Avi.gif" class="logo"/>
            </div>
            <div class="infoSection">
                <div class="product1">
                    <div class="productName">Название</div>
                    <div class="productNo">Описание</div>
                    <div class="price">Цена ₽</div>
                    <div class="productColor">Второе описание</div>
                    <div class="colors">
                        <div class="c1"></div>
                        <div class="c2"></div>
                        <div class="c3" style="opacity:0.3;"></div>
                    </div>
                    <div class="line"></div>
                    <div class="rate">~Рейтинг<br> 
                     </div>
                    <div class="productRate">3 описание</div>
                    <div class="addToCart">Купить</div>
                    <div class="addToWishlist">
                                                               <img class="airlinelogo" src="">
                    </div>
                </div>
                
                
                <div class="product2">
                    <div class="productName">Название</div>
                    <div class="productNo">Описание</div>
                    <div class="price">Цена  ₽</div>
                    <div class="productColor">Второе описание</div>
                    <div class="colors">
                        <div class="c1"></div>
                        <div class="c2"></div>
                        <div class="c3"></div>
                    </div>
                    <div class="line"></div>
                    <div class="rate">~ Рейтинг</div>
                    <div class="productRate">3 описание</div>
                    <div class="addToCart">Купить</div>
                    <div class="addToWishlist">
                        
                    <img class="airlinelogo" src="">
                    </div>
                </div>
                
                 <div class="product3">
                    <div class="productName">Название</div>
                    <div class="productNo">Описание</div>
                    <div class="price">Цена  ₽</div>
                    <div class="productColor">Второе описание</div>
                    <div class="colors">
                        <div class="c1"></div>
                        <div class="c2"></div>
                        <div class="c3"></div>
                    </div>
                    <div class="line"></div>
                    <div class="rate">~ Рейтинг</div>
                    <div class="productRate">3 описание</div>
                    <div class="addToCart">Купить</div>
                    <div class="addToWishlist">
                        
                    <img class="airlinelogo" src="">
                    </div>
                </div>
                
            </div>
            <div class="next">&#8594;</div>
            <div class="pre">&#8592;</div>
</div>
</div>


Заранее спасибо большое, с уважением.
  • Вопрос задан
  • 65 просмотров
2 комментария
Подписаться 1 Простой 2 комментария
Решения вопроса 1
@zxf
Копируете в HTML любой div слайдера (div.product1, например), вставляете его после div.product3 и меняете у него класс на .product4

Далее делаете проверку в JS:
else if (count === 4) { логика из предыдущего else if с заменой .product3 на .product4 и тд };


Но, вообще-то, это динамически надо делать, а-то так у вас совсем система хардовая получится. Если эти картинки с бекенда грузить будете, то уже подобная реализация такая работать не будет.
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Настройка шаблона
19 апр. 2024, в 15:01
35000 руб./за проект
Разработать телеграмм бота для анонимных сообщений
19 апр. 2024, в 14:53
30000 руб./за проект
Разработать парсер и админку
19 апр. 2024, в 14:12
30000 руб./за проект
Ещё заказы