मैंने HTML और CSS के साथ निम्न छवि हिंडोला बनाया है। यह मेरी Wordpress वेबसाइट पर, केवल मोबाइल डिस्प्ले पर चलता है। मैं चाहता हूं कि यह लगातार आगे बढ़े और फिर बिना 'शुरू किए' खुद को दोहराए। मैं बस इसे निरंतर लूप में चलाना चाहता हूं।

क्या एचटीएमएल, सीएसएस या jQuery के साथ इसे हासिल करना संभव है? मैं इस मामले में सादे जेएस का उपयोग नहीं करना पसंद करता हूं।

<div class="container">
    <div class="photobanner">       
        <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/NesherPointer.jpg" alt="נשר">
        <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/2.jpg" alt="Xerox">
        <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/9.jpg" alt="Neutrogena">
        <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/8.jpg" alt="Orbit">
        <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/11.jpg" alt="M & M">
        <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/12.jpg" alt="Mercedes-Benz">            
    </div>
</div>

यहाँ छवि हिंडोला का CSS है:

/* Photo Banner */
.container {
    width:100%;
    overflow: hidden;
    margin: 5px auto;
    background: white;
}

.photobanner {
    height: 120px;
    width: 3000px;
}

.photobanner img {
    height: 120px;
    width: 120px;
}

.photobanner img  {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}


/*keyframe animations*/
.second {
    -webkit-animation: bannermoves 25s linear infinite;
       -moz-animation: bannermoves 25s linear infinite;
        -ms-animation: bannermoves 25s linear infinite;
         -o-animation: bannermoves 25s linear infinite;
            animation: bannermoves 25s linear infinite;;
}

@keyframes "bannermoves" {
 0% {margin-left: -3000px;}
 100% {margin-left: 200px;}
}

@-moz-keyframes bannermoves {
 0% {margin-left: -3000px;}
 120% {margin-left: 200px;}
}

@-webkit-keyframes "bannermoves" {
 0% {margin-left: -3000px;}
 100% {margin-left: -100px;}
}

@-ms-keyframes "bannermoves" {
 0% {margin-left: -3000px;}
 100% {margin-left: 200px;}

@-o-keyframes "bannermoves" {
 0% {margin-left: -3000px;}
 100% {margin-left: 200px;}
}

मुझे पता है कि लिंक को दोहराने के लिए एक बेकार समाधान होगा, लेकिन मैं सोच रहा था कि इससे बचने का कोई तरीका है और वर्तमान सीएसएस या एचटीएमएल में कुछ कोड लाइन या कुछ जोड़ें।

0
Rozi Buber 24 जुलाई 2018, 10:29
उल्लू हिंडोला का प्रयास करें
 – 
charan kumar
24 जुलाई 2018, 10:36
मुझे लगता है कि एक जावास्क्रिप्ट समाधान आपका सबसे अच्छा मामला परिदृश्य है, क्योंकि यदि आप कभी भी छवि सूची या छवियों के किसी भी आकार को बदलते हैं तो आपको सीएसएस को सही तरीके से काम करने के लिए हमेशा अपडेट करना होगा।
 – 
Reinstate Monica Cellio
24 जुलाई 2018, 10:55
कृपया एक बेला जोड़ें।
 – 
Razvan Zamfir
24 जुलाई 2018, 11:50

2 जवाब

इस प्रकार के हिंडोला आसान हैं। बस white-space: nowrap को .photobanner में जोड़ें फिर एक पुनरावर्ती फ़ंक्शन का उपयोग करें। मैंने सीएसएस से संक्रमण हटा दिए। आप अभी भी उनका उपयोग कर सकते हैं, लेकिन 'मार्जिन-बाएं' का उपयोग न करें क्योंकि यह jQuery एनिमेट से मार्जिन लेफ्ट के साथ एक दृश्य संघर्ष पैदा करेगा।

var animateRecursive = function () {

    var photobanner = $(".photobanner");
    
    /**
     * 1. Always get the first child from .photobanner
     */
    var elem = photobanner.children().first();

    /**
     * 2. Append it to .photobanner as last element a cloned version of your 'elem'
     */
    photobanner.append(elem.clone());

    /**
     * 3. Animate it to go to the left and adjust duration
     */
    elem.stop(true, true).animate({
        marginLeft: (-1 * elem.outerWidth()) + 'px'
    }, {
        duration: 500,
        easing: 'linear',
        complete: function () {

            /**
             * 4. Remove the hidden element to keep .photobanner clean
             */
            elem.remove();

            /**
             * 5. Repeat
             */
            animateRecursive();

        }
    });

};

animateRecursive();
.container {
    width: 100%;
    overflow: hidden;
    margin: 5px auto;
    background: white;
}

.photobanner {
    height: 120px;
    width: 750px;
    overflow: hidden;
    white-space: nowrap;
}

.photobanner img {
    height: 120px;
    width: 120px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="photobanner">

        <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/NesherPointer.jpg" alt="נשר">
        <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/2.jpg" alt="Xerox">
        <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/9.jpg" alt="Neutrogena">
        <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/8.jpg" alt="Orbit">
        <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/11.jpg" alt="M & M">
        <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/12.jpg" alt="Mercedes-Benz">

    </div>
</div>
1
darklightcode 24 जुलाई 2018, 11:36

मेरा सुझाव है कि आप अपना हिंडोला न बनाएं, बल्कि पहले से मौजूद समाधान जैसे Owl.carousel का उपयोग करें।

यहां एक हिंडोला का एक उदाहरण दिया गया है जो अंतिम तत्व के बाद पुनरारंभ होता है, यह संपत्ति का उपयोग करता है loop: true प्रभाव प्राप्त करने के लिए:

var owl = $('.owl-carousel');
owl.owlCarousel({
    items:4,
    loop:true,
    margin:10,
    autoplay:true,
    autoplayTimeout:1000,
    autoplayHoverPause:true
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="photobanner owl-carousel owl-theme">
	<img src="https://via.placeholder.com/350x150" alt="נשר">
	<img src="https://via.placeholder.com/350x150" alt="Xerox">
	<img src="https://via.placeholder.com/350x150" alt="Neutrogena">
	<img src="https://via.placeholder.com/350x150" alt="Orbit">
	<img src="https://via.placeholder.com/350x150" alt="M & M">
	<img src="https://via.placeholder.com/350x150" alt="Mercedes-Benz">
</div>
1
LS_ 24 जुलाई 2018, 12:31