Swipe functie toevoegen aan carousel - Softwareontwikkeling

Vraag

vrijdag 24 januari 2025 11:25

Acties:

0 Henk 'm!

Topicstarter

Heb een mooie carousel gevonden welke perfect werkt voor mijn projectje, echter zit er geen swipe functie in. Nu vond ik een mogelijkheid om dit 'simpel' op te vangen middels JQueryMobile.
Helaas krijg ik het niet voor elkaar. Ik denk dat het mis gaat bij dat ik een verkeerde class of zo gebruik in dit stukje

code:

1	$( "div.carousel" ).on( "swipe", swipeHandler );

, maar heb al meerdere geprobeerd en werkt nog steeds niet. Ik ben geen deskundige met Jquery dus hoop dat iemand me wat op weg kan helpen met dit probleem.

code:

<head>
      <style>
            .carousel {
                overflow: hidden;
            }
            .carousel-inner {
                width: 100%;
                left: 0%;
            }
            .carousel-inner > .item.next,
            .carousel-inner > .item.active.right {
                left: 10;
                -webkit-transform: translate3d(33%, 0, 0);
                transform: translate3d(33%, 0, 0);
            }
            .carousel-inner > .item.prev,
            .carousel-inner > .item.active.left {
                left: 0;
                -webkit-transform: translate3d(-33%, 0, 0);
                transform: translate3d(-33%, 0, 0);
            }
            .carousel-control.left, .carousel-control.right {
                background: rgba(0, 0, 0, 0.3);
                color:#000;
                width: 5%;
            }
            .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9{
                padding-left:0;
                padding-right:0;
            }
      </style>

      <script>
            $(function(){
                // Bind the swipeHandler callback function to the swipe event on div.box
            $( "div.carousel" ).on( "swipe", swipeHandler );
 
                // Callback function references the event target and adds the 'swipe' class to it
            function swipeHandler( event ){
                $( event.target ).addClass( "swipe" );
            }
        });
        </script>

        <script>
            $(document).ready(function () {
                $('#myCarousel3').carousel({
                    interval: 0 //set auto slide time
                })
            
                $('.carousel .item').each(function () {
                    var next = $(this).next();
                    if (!next.length) {
                        next = $(this).siblings(':first');
                    }
                    next.children(':first-child').clone().appendTo($(this));
                    if (next.next().length > 0) {
                        next.next().children(':first-child').clone().appendTo($(this));
                    } else {
                        $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
                    }
                    
                });
            });
                    
        </script>
      </head>

      <body>    
        
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12 center-block">
                    <div class="carousel slide" id="myCarousel3">
                        <div class="carousel-inner">
                            <div class="item active">
                                <div class="col-xs-4"><a href="#"><img src="1.jpg" class="img-responsive"></a></div>
                            </div>
                            <div class="item">
                                <div class="col-xs-4"><a href="#"><img src="2.jpg" class="img-responsive"></a></div>
                            </div>
                            <div class="item">
                                <div class="col-xs-4"><a href="#"><img src="gallery/3.jpg" class="img-responsive"></a></div>
                            </div>
                            <div class="item">
                                <div class="col-xs-4"><a href="#"><img src="gallery/4.jpg" class="img-responsive"></a></div>
                            </div>
                            <div class="item">
                                <div class="col-xs-4"><a href="#"><img src="gallery/5.jpg" class="img-responsive"></a></div>
                            </div>
                        </div>
                        <a class="left carousel-control" href="#myCarousel3" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
                        <a class="right carousel-control" href="#myCarousel3" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
      </body>

Alle reacties

vrijdag 24 januari 2025 12:11

Acties:

0 Henk 'm!

AW_Bos

Liefhebber van nostalgie... 🕰️

Kan je eens kijken met wat console.log() jes in je if-statement welke uiteindelijk worden opgeroepen? Dan weet je waar de schoen wringt.

☎ Telecommunicatie van vroeger
🚅Alles over spoor en treintjes

vrijdag 24 januari 2025 12:24

Acties:

0 Henk 'm!

Blueflame_Core

Topicstarter

Oef geen idee waar je het nu over hebt sorry.

vrijdag 24 januari 2025 12:28

Acties:

+1 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Blueflame_Core schreef op vrijdag 24 januari 2025 @ 12:24:
Oef geen idee waar je het nu over hebt sorry.

Je hebt een aantal if-statements in je code:

JavaScript:

if (!next.length) {
//...
}
//...
if (next.next().length > 0) {
//...
} else {
//...
}

Wat @AW_Bos suggereert is daar op strategische plekken een console.log(...) neer te zetten om je probleem te debuggen: Debuggen: Hoe doe ik dat?
Je kunt ook een breakpoint zetten om zo variabelen te inspecteren of de "flow" van code te volgen om uit te puzzelen wat er gebeurt. Dat doe je door je aannames ("ik verwacht dat X is 5 hier dus dan...") kloppen met de werkelijkheid ("Hee, console.log(x) geeft output 3? Eens kijken waar dat door komt...").

[ Voor 31% gewijzigd door RobIII op 24-01-2025 12:32 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

vrijdag 24 januari 2025 12:31

Acties:

0 Henk 'm!

Blueflame_Core

Topicstarter

Oke bedankt ga ik mee aan de slag.

vrijdag 24 januari 2025 13:25

Acties:

0 Henk 'm!

Blueflame_Core

Topicstarter

Het bleek om het bootstrap carousel script te gaan kwam ik achter en toen ik daarop zocht kwam ik onderstaande oplossing tegen, heb dit toegevoegd en daarmee is het opgelost.
Wellicht dat iemand er nog wat aan heeft.

code:

<script>
            $('.carousel').on('touchstart', function(event){
    const xClick = event.originalEvent.touches[0].pageX;
    $(this).one('touchmove', function(event){
        const xMove = event.originalEvent.touches[0].pageX;
        const sensitivityInPx = 1;

        if( Math.floor(xClick - xMove) > sensitivityInPx ){
            $(this).carousel('next');
        }
        else if( Math.floor(xClick - xMove) < -sensitivityInPx ){
            $(this).carousel('prev');
        }
    });
    $(this).on('touchend', function(){
        $(this).off('touchmove');
    });
});
        </script>

maandag 27 januari 2025 14:20

Acties:

0 Henk 'm!

Blueflame_Core

Topicstarter

Blueflame_Core schreef op vrijdag 24 januari 2025 @ 13:25:
Het bleek om het bootstrap carousel script te gaan kwam ik achter en toen ik daarop zocht kwam ik onderstaande oplossing tegen, heb dit toegevoegd en daarmee is het opgelost.
Wellicht dat iemand er nog wat aan heeft.

code:

<script>
            $('.carousel').on('touchstart', function(event){
    const xClick = event.originalEvent.touches[0].pageX;
    $(this).one('touchmove', function(event){
        const xMove = event.originalEvent.touches[0].pageX;
        const sensitivityInPx = 1;

        if( Math.floor(xClick - xMove) > sensitivityInPx ){
            $(this).carousel('next');
        }
        else if( Math.floor(xClick - xMove) < -sensitivityInPx ){
            $(this).carousel('prev');
        }
    });
    $(this).on('touchend', function(){
        $(this).off('touchmove');
    });
});
        </script>

Kon mijn post helaas niet meer wijzigen, dus maar even zo. Vergeet het script hierboven en gebruik het volgende:

Dit tussen <head></head>:

code:

1	<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

Dit onder je carousel, maar kan waarschijnlijk ook wel in head, niet getest.

code:

<script>
    
$(document).ready(function() {
   $("#myCarousel1,#myCarousel2,#myCarousel3").swiperight(function() {
      $(this).carousel('prev');
    });
   $("#myCarousel1,#myCarousel2,#myCarousel3").swipeleft(function() {
      $(this).carousel('next');
   });
});
</script>

Het andere gaf problemen bij het swipe-scrollen en als je over de carousel veegde ging hij scrollen, terwijl je de pagina wilt bewegen en niet de carousel.

Pagina: 1

Reageer