मेरे प्रश्न के 3 भाग हैं। इस जेएस समस्या के किसी भी हिस्से के साथ किसी भी सहायता की बहुत सराहना की जाएगी। मैं परीक्षण और त्रुटि से जेएस को सीखने और समझने का प्रयास कर रहा हूं।

enter image description here

मैंने यह सुंदर दिखने वाला यात्रा लैंडिंग पृष्ठ बनाया है, https://portfolioprime.github.io /Nature%20carousel/glidejs.html एक थंबनेल हिंडोला के साथ जो Glide.js का उपयोग करता है, जो वास्तव में अच्छा है और अच्छी तरह से काम करता है। हिंडोला बाईं ओर चलता है और इसमें स्लाइड को मैन्युअल रूप से नियंत्रित करने के लिए तीर बटन होते हैं।

लेकिन मैं एक वेनिला जेएस हिंडोला स्लाइडर को लागू करने की कोशिश कर रहा हूं, लेकिन मैं बुरी तरह विफल हो रहा हूं। 2 दिनों से संघर्ष कर रहा हूं और मैं जो सबसे अच्छा हासिल कर सकता हूं, वह है एक हिंडोला आइटम को बाएं और दाएं हिलाना। देखें https://portfolioprime.github.io/Nature%20carousel/

मैं क्या चाहता हूं कि हिंडोला स्वचालित रूप से बाईं ओर खिसक जाए, स्लाइडर को मैन्युअल रूप से नियंत्रित करने के लिए तीर बटन के साथ।

मैं querySelectorAll('.carousel-items') के साथ सभी कैरोसेल-आइटम को लक्षित कर रहा हूं और left:-274px को कैरोसल कंटेनर glide__slides में जोड़ रहा हूं।

यहां मेरा जेएस कोड है।

// var & event-listener buttons
document.querySelector(".left").addEventListener("click", slideLeft);

document.querySelector(".right").addEventListener("click", slideRight);

// Function slide left
function slideLeft(left) {
  document.querySelector('.glide__slides').style.left = left;
}
// Function slide left
function slideRight(right) {
  document.querySelector('.glide__slides').style.left = right;
}

दूसरे, मैं एक सक्रिय हिंडोला-आइटम रखना चाहता हूं, जो सक्रिय होने पर पृष्ठभूमि छवि को स्वचालित रूप से बदल देता है।

अभी मेरे पास hero.style.background = var; है और मैंने इसे प्रत्येक हिंडोला आइटम पर onclick = function('01.jpg') के साथ ऑनक्लिक बदल दिया है।

यहाँ कोड है।

// Change Hero Img
 function heroChange(hmmm) {
  var hero = document.querySelector('.hero');
  hero.style.background = hmmm;
 }

तो मुझे लगता है कि मैं EventListeners को हिंडोला-वस्तुओं में जोड़ूंगा और हिंडोला-आइटम में एक सक्रिय वर्ग जोड़ूंगा जैसे,

var slides = document.querySelectorAll('.carousel-items');

function changeBgImg() {
  slides.forEach(s => s.classList.remove('active');
  this.classList.add('active');

//change the bg image === this
//But I have no idea how to do that

}

तीसरा, मेरे पास उपरोक्त समान कार्यों का उपयोग करके सामग्री, पृष्ठभूमि और कैरोसेल संकेतक हैं लेकिन यह वास्तव में गंदा कोड जैसा लगता है। HTML में प्रत्येक .carousel-item है, उनमें से दस हैं, प्रत्येक में 4 फ़ंक्शन हैं। यह इस तरह दिख रहा है:

      <div class="glide hero-carousel">
        <div class="glide__track" data-glide-el="track">
          <ul class="glide__slides">

            <li class="glide__slide carousel-item" 
              onclick="heroChange('url(images/02.jpg) bottom/cover no-repeat'); 
              number('01'); 
              h4('Destination Shire'); 
              h1('Valley<br> of Dreams');">

              <div class="carousel-text">
                <p>Destination Shire</p>
                <h3>Valley<br> of Dreams</h3>
              </div>

            </li>

            <li class="glide__slide carousel-item" 
              onclick="heroChange('url(images/03.jpg) bottom/cover no-repeat'); 
              number('02'); 
              h4('Destination Westwood'); 
              h1('Misty<br> Woodlands');">

              <div class="carousel-text">
                <p>Destination Westwood</p>
                <h3>Misty<br> Woodlands</h3>
              </div>

            </li>

         </ul>
       </div>
     </div>

तो यह काफी yucky लग रहा है। हालांकि यह काम करता है, लेकिन मुझे इन सभी कार्यों को एक फ़ंक्शन में डालकर इसे प्राप्त करने का एक और अधिक शानदार तरीका खोजना अच्छा लगेगा जो अनुक्रम में प्रत्येक भाग करता है।

अंत में, मैं संक्रमण ऑन-क्लिक एनिमेशन प्राप्त करना चाहता हूं, लेकिन यह पूरी तरह से मछली का एक और केतली है।

तो यह बात है। वाह!

समय निकालने के लिए धन्यवाद दोस्तों, मैं इसकी सराहना करता हूं। आप जो भी मदद कर सकते हैं, वह मुझे एक बेहतर डिजाइनर बनाने वाली है। वास्तव में परियोजनाओं का एक समूह है जो मेरे पास उत्तरों से लाभान्वित होगा।

यदि आप कम से कम भाग 2 और 3 में सहायता प्रदान कर सकते हैं: कोड को 1 फ़ंक्शन में साफ़ करना और सक्रिय वर्ग पर बीजी-छवि बदलना जो एक बड़ी बड़ी मदद होगी।

JS बहुत कुछ कर सकता है और मुझे Google और YouTube पर उत्तर नहीं मिल रहे हैं।

फिर से धन्यवाद।

ताज़ा जानकारी:

मैंने इस प्रश्न द्वारा दिखाए गए अनुसार मार्जिन-बाएं का उपयोग करके स्लाइडर को संपादित किया है:

वेनिला जावास्क्रिप्ट हिंडोला स्लाइड नहीं कर रहा है

// var & event-listener buttons
document.querySelector(".left").addEventListener("click", slideLeft);
document.querySelector(".right").addEventListener("click", slideRight);


let marginLeft = 0;
const slides = document.querySelector('.glide__slides');

// Function slide left
function slideLeft() {
  marginLeft += 264;
  slides.style.marginLeft = marginLeft + 'px';
  console.log(getComputedStyle(slides).marginLeft);
}
// Function slide Right
function slideRight() {
  marginLeft -= 264;
  slides.style.marginLeft = marginLeft + 'px';
  console.log(getComputedStyle(slides).marginLeft);
}

इससे अब हिंडोला एक बार में मैन्युअल रूप से 1 स्लाइड चला रहा है। अभी भी पूरी तरह से समझ में नहीं आ रहा है कि उपरोक्त मेरा पिछला कोड क्यों काम नहीं करता है। अगर कोई मुझे यह समझा सकता है कि यह बहुत अच्छा होगा।

मैं अभी भी कुछ मुद्दों के साथ बचा हूँ:

  1. स्लाइड के अंत में ऑटोस्लाइडिंग और लूपिंग।

  2. सक्रिय स्लाइडर होने से पृष्ठभूमि स्वचालित रूप से बदल जाती है। इस बिंदु पर यह केवल ऑनक्लिक बदलता है।

  3. फ़ंक्शन कॉल और फ़ंक्शंस को व्यवस्थित करने का तरीका खोजना।

2
Wayne R Hendricks 27 सितंबर 2020, 19:48

1 उत्तर

सबसे बढ़िया उत्तर

यह प्रश्न विभिन्न विचारों के बारे में पूछता है कि कैसे कोड को सरल बनाया जाए और एक स्लाइडर बनाने के लिए देशी जावास्क्रिप्ट का उपयोग कैसे किया जाए जो लगातार लुढ़कता है।

कोड मूल रूप से ग्लाइडर का उपयोग करता था और वांछित परिणाम प्राप्त करने के लिए यह कुछ आसान हो सकता है, उदाहरण के लिए जब स्लाइड बाईं ओर जाती है तो पृष्ठभूमि बदलने के लिए एनीमेशनएंड ईवेंट का उपयोग करना। हालाँकि, हाथी को धीरे-धीरे खाकर मैं पहले यकी कोड (भाग 3) से निपटूंगा।

हालांकि एचटीएमएल काफी कठिन दिखता है, उदाहरण के लिए प्रत्येक ली तत्व के लिए एक क्लिक पर 4 कॉल, वर्तमान में यह आवश्यक है तो चलिए इसे रन टाइम पर बनाने की जांच करते हैं। यह हमें अधिक आसानी से बनाए रखने योग्य कोड देता है। उदाहरण के लिए, यदि हम एक स्लाइड को हटाना चाहते हैं, या स्लाइड के क्रम को बदलना चाहते हैं या एक जोड़ना चाहते हैं तो हम नीचे परिभाषित स्लाइडर सरणी को बदल सकते हैं और बाकी जावास्क्रिप्ट करेगा।

स्लाइडिंग के बारे में पूछे गए प्रश्न का भाग 1। हम सीएसएस एनीमेशन का उपयोग करके पूरे उल तत्व को कुछ इस तरह से परिभाषित करते हैं, जहां 33vw एक स्लाइड की कुल चौड़ाई है (इंक। मार्जिन/पैडिंग)

@keyframes sliding0 {
  0% { left: 0; }
  30% { left: 0; }
  100% { left: -33vw; }
}

और हम ऐनिमेशन एंड इवेंट्स को ट्रैप करने के लिए एलिमेंट में एक इवेंट श्रोता जोड़ते हैं क्योंकि जब उल ने एक स्लाइड की चौड़ाई को खिसका दिया है तो हम हीरो की छवि को बदलना चाहते हैं, और हम उस स्लाइड को रखना चाहते हैं जो इन्फिनी स्लाइडिंग के पीछे गायब हो गई है काम करेगा . फिर हम एनीमेशन को फिर से चालू करते हैं।

इस और अन्य घटनाओं से कैसे निपटा जाता है, इसके विवरण के लिए स्निपेट देखें। यह यह भी दिखाता है कि चेंजहेरो फ़ंक्शन कैसे काम कर सकता है जो प्रश्न का भाग 2 था। ध्यान दें, स्निपेट SO वातावरण में कम या ज्यादा काम करता है, हालांकि कभी-कभी होवर क्रिया को आंशिक रूप से अनदेखा कर दिया जाता है। अपनी मशीन पर कोड चलाना हालांकि यह ठीक होना चाहिए।

<!DOCTYPE html>
<html>
<head>
<style>

@keyframes sliding0 {
  0% { left: 0; }
  30% { left: 0; }
  100% { left: -33vw; }
}

@keyframes sliding1 {
  0% { left: 0; }
  30% { left: 0; }
  100% { left: -33vw; }
}

body {
  background-repeat: no-repeat no-repeat;
  background-size: cover;
  background-position: center center;
}
div .glide_track {
  position: relative;
  width: 100vw;
  overflow-x: hidden;
}

ul {
  position:relative;
  left: 0;
  width: 330vw;
  height:100vh;
  animation-name: sliding0;
  animation-duration: 3s;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  position: relative;
  left:0;
  top:0;
  float:left;
  width: 32vw;
  height:30vw;
  display: inline-block;
  margin: 0;
  margin-right: 1vw;
  padding: 0;
  background-size: cover;
  background-repeat: no-repeat no-repeat;
  background-position: center center;
}

</style>
</head>
<body>
<script>

// we put the two lots of text and the image url for each slide in an array in the order they are to be shown
// this makes it easier to maintain when you want to add or remove a slide or change their order
// we only have one slider at the moment but this makes it more general

// these are the offsets in the array describing a slide. Done as indexes rather than named as easier to set up sliders array
const img = 0;
const text1 = 1;
const text2 = 2;

const sliders = [
  [
    ['https://ahweb.org.uk/boxfordmosaic.jpg','Shire','Valley<br> of Dreams'],
    ['https://ahweb.org.uk/gear-in-turbine-house-reading.jpg','Westwood','Misty Woodlands'],
    ['https://ahweb.org.uk/tricycle-in-abbey-ruins.jpg','Shire','Valley<br> of Dreams'],
    ['https://ahweb.org.uk/boxfordmosaic.jpg','Shire','Valley<br> of Dreams'],
    ['https://ahweb.org.uk/gear-in-turbine-house-reading.jpg','Westwood','Misty Woodlands'],
    ['https://ahweb.org.uk/tricycle-in-abbey-ruins.jpg','Shire','Valley<br> of Dreams'],
    ['https://ahweb.org.uk/boxfordmosaic.jpg','Shire','Valley<br> of Dreams'],
    ['https://ahweb.org.uk/gear-in-turbine-house-reading.jpg','Westwood','Misty Woodlands'],
    ['https://ahweb.org.uk/tricycle-in-abbey-ruins.jpg','Shire','Valley<br> of Dreams'],
    ['https://ahweb.org.uk/tricycle-in-abbey-ruins.jpg','Shire','Valley<br> of Dreams']
  ]
];

// go through each slider and create its outer divs and its ul element
sliders.forEach(createSlider);

function createSlider(slider,sliderno) {
  const div1 = document.createElement('DIV');
  const div2 = document.createElement('DIV');
  const ul = document.createElement('UL');

  div1.classList.add("glide","hero-carousel");
  div2.classList.add("glide_track");
  div2.setAttribute("data-glide-el","track");

  div1.appendChild(div2);
  div2.appendChild(ul);
  document.body.appendChild(div1);

  ul.classList.add("glide__slides");
    
  ul.addEventListener("animationend", animationEnd);
 
  slider.forEach(createLi);

  function createLi(slide,slideNo) {
    const li = document.createElement('LI');
    li.classList.add("glide__slide","carousel-item");
    li.style.backgroundImage='url('+slide[img]+')';
    li.addEventListener("click",slideClicked);
    li.addEventListener("mouseover",slideHovered);
    li.addEventListener("mouseout",slideUnhovered);
    
    li.setAttribute('data-slideno','0' + slideNo);//! needs generalising if you have >10 slides !

    ul.appendChild(li);

    const div = document.createElement('DIV');
    const p = document.createElement('P');
    const h3 = document.createElement('H3');

    p.innerHTML = slide[text1];
    div.appendChild(p);
    h3.innerHTML = slide[text2];
    div.appendChild(h3);

    li.appendChild(div);
  }
}

// this is for testing, in real version use whatever required (i.e. whichever element is to have the hero image)
function ahHeroChange(backgroundImage) {  
  document.body.style.background = backgroundImage + " bottom/cover no-repeat";
}

function slideClicked(event) {
  var slide = event.target;
  var slideNo = slide.getAttribute('data-slideno');
  
  // make the hero image the same as the slide's
  ahHeroChange(slide.style.backgroundImage);
  
/* I don't know what these functions do - they were executed in the original on a click 

  number(slideno);
  h4(slide.firstElementChild.querySelector('p').innerHTML);// text1 of the slide is passed to h4
  h1(slide.firstElementChild.querySelector('h3').innerHTML;// text2 of the slide is passed to h1

*/
}

function slideHovered(event) {
  var slide = event.target;
  var slider = slide.parentElement;
  slider.style.animationPlayState = 'paused';
  ahHeroChange(slide.style.backgroundImage);
}

function slideUnhovered(event) {
  var slide = event.target;
  var slider = slide.parentElement;
  
  //restore the hero image to the first one in the slider
  ahHeroChange(slider.firstElementChild.style.backgroundImage);
  
  //get the animation running again
  slider.style.animationPlayState = 'running'; 
}

function animationEnd(event) {
   //find the element that was clicked (it will be a ul element representing a slider)
   var slider = event.target;
   
  //take the first slide off the list and put it back at the end
  slider.append(this.firstElementChild);
  
  //change the hero image to the slide which is now the leftmost - use modified heroChange in the final version
  document.body.style.backgroundImage = this.firstElementChild.style.backgroundImage;
  
  // toggle the animationName (to an identical keyframes action) to force the animation to start again
  slider.style.animationName='sliding'+(Number(event.animationName.replace('sliding',''))+1)%2;
}

</script>
</body>
</html>
1
A Haworth 29 सितंबर 2020, 09:01