Проблема в движущихся изображениях в левом и правом ползунке

Я написал код ползунка содержания, и я в состоянии двигать содержание справа налево по щелчку правильно.

Однако, если я должен двигать содержание слева направо, я должен щелкнуть дважды по кнопке стрелки влево впервые после того скольжения, оставленного правильным работам единственным щелчком.

Кроме того, как только я начинаю двигать содержание слева направо, если я должен двигать содержание справа налево, я должен дважды щелкнуть по кнопке стрелки вправо дважды впервые.

Ниже код.

<head>
    <title></title>
</head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.8.1.min.js">

</script>
<script type="text/javascript" src="js/jquery.easing.1.3.js">

</script>
<!--script type="text/javascript" src="js/slidR.js"> 
        <div id="slide1" class="slide">
            
        </div>
        <div id="slide2" class="slide">
            
        </div>
        <div id="slide3" class="slide">
            
        </div>
        <div id="slide4" class="slide">
            
        </div>
    </div>
</body>
<script>
    $(function() {
        var count = $("#sliderBlock").children().length;
        var slideWidth = $(".slide").outerWidth();
        var slideHeight = $(".slide").outerHeight();
        var totalWidth = count * slideWidth;
        var easeFn = "swing";
        var fs = 1;
        var ls = count;
        var currentSlide;
        $("#sliderBlock").append("<div id='next'></div>")
        $("#sliderBlock").append("<div id='prev'></div>")
        $(".slide").wrapAll('<div id="allSlides">');
        $("#allSlides").css({
            "width": totalWidth,
            "height": slideHeight
        });
        $("#sliderBlock").append("
    "); for (i = 1; i <= count; i++) { $("#pagination").append("
  • " + i + "
  • ") } $("#pagination li a#slide1").addClass("liveSlide"); var interval = 3000; var timeInterval = setInterval(function() { slidR() }, interval); $("#prev").on("click", slidR_L) $("#next").on("click", slidR_R) function slidR() { // slidR_R(); // slidR_L(); } var curSlide, curSlideNo, prevSlideNo, divReOrder; divReOrder = 1; function slidR_R() { $("#allSlides").animate({ left: -slideWidth }, 1000, function() { $(".slide:first-child").clone().appendTo("#allSlides"); $(".slide:first-child").detach(); $("#allSlides").css('left', "0px"); }); } function slidR_L() { $("#allSlides").animate({ left: "0" }, 1000, function() { $(".slide:last-child").clone().prependTo("#allSlides"); $(".slide:last-child").detach(); $("#allSlides").css('left', -slideWidth); }); } }); </script>

0
nl ja de
вы получаете какую-либо ошибку в пульте браузера, когда вы нажимаете следующие или предыдущие кнопки?
добавлено автор Praveen Puglia, источник
@pjp Никакие ошибки, когда я нажимаю правильную или левую кнопку
добавлено автор user1964217, источник

1 ответы

Попробуйте этим и посмотрите, помогает ли:

<script>

        function slidR_R() {
            $("#allSlides").animate({
                left: -slideWidth
            }, 1000, function() {
                $(".slide:first-child").clone().appendTo("#allSlides");
                $(".slide:first-child").detach();
                $("#allSlides").css('left', "0px");
            });
        }

        function slidR_L() {
            $("#allSlides").animate({
                left: "0"
            }, 1000, function() {

                $(".slide:last-child").clone().prependTo("#allSlides");
                $(".slide:last-child").detach();
                $("#allSlides").css('left', -slideWidth);
            });
        }
    $(function() {
        var count = $("#sliderBlock").children().length;
        var slideWidth = $(".slide").outerWidth();
        var slideHeight = $(".slide").outerHeight();
        var totalWidth = count * slideWidth;
        var easeFn = "swing";
        var fs = 1;
        var ls = count;
        var currentSlide;
        $("#sliderBlock").append("<div id='next'></div>")
        $("#sliderBlock").append("<div id='prev'></div>")
        $(".slide").wrapAll('<div id="allSlides">');
        $("#allSlides").css({
            "width": totalWidth,
            "height": slideHeight
        });
        $("#sliderBlock").append("
    "); for (i = 1; i <= count; i++) { $("#pagination").append("
  • " + i + "
  • ") } $("#pagination li a#slide1").addClass("liveSlide"); var interval = 3000; var timeInterval = setInterval(function() { slidR() }, interval); $("#sliderBlock").on("click", "#prev", slidR_L); $("#sliderBlock").on("click", "#next", slidR_R); var curSlide, curSlideNo, prevSlideNo, divReOrder; divReOrder = 1; }); </script>
1
добавлено
Это не решило проблему. Infact ползунок не работал.
добавлено автор user1964217, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing