stackoom
  简体   繁体   中英

How to make the JavaScript slider function?

 原文  2022-05-21 01:15:55  2   1    javascript/ html/ jquery/ css

Question

So I'm trying to create a sliding function for a section in my html. But I noticed that the JavaScript isn't acknowledged by the html/browser. I'm using Eclipse editor. I have done everything I can... Please take a look. I won't say that the code is the problem, cuz everything looks good. Or is it where I stored the JavaScript file? Could the problem be from the directory?

Bad code or not, if I update a work, it should show on the launch, but like I said, it doesn't even acknowledge the presence of a JavaScript file. (Some elements has been removed from the html codes. The customer testimonial are four cards) 

 const leftArrow = document.getElementsByClassName("leftArrow"); const rightArrow = document.getElementsByClassName("rightArrow"); const slider = document.getElementsByClassName("slider"); let a = 0; rightArrow.style.visibility = "hidden"; leftArrow.onclick = function() { a = a - 550; slider.style.left = a + "px"; //right arrow if (a = 0) { rightArrow.style.visibility = "hidden"; } else { rightArrow.style.visibility = "visible"; } // left arrow if (a = -1650) { leftArrowt.style.visibility = "hidden"; } else { leftArrow.style.visibility = "visible"; } }; rightArrow.onclick = function() { a = a + 550; slider.style.left = a + "px"; //right arrow if (a = 0) { rightArrow.style.visibility = "hidden"; } else { rightArrow.style.visibility = "visible"; } // left arrow if (a = -1650) { leftArrowt.style.visibility = "hidden"; } else { leftArrow.style.visibility = "visible"; } };
 customer-testimonials { background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img/customer-testimonialbg.jpg); background-size: cover; background-position: center; height: 100vh; background-attachment: fixed; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; } /*.row h2{ font-size: 21px; margin-bottom: 70px; position: relative; } */ /* .row h2::after{ content: " "; position: absolute; width: 50%; height: 5px; background-color: #0066ac; left: 50%; bottom: -10px; transform: translateX(-50%); border-radius: 10px; } */ .container { width: 550px; height: 330px; border-radius: 12px; box-shadow: 0 5px 55px rgba(51, 51, 51, 0.336); position: relative; overflow: hidden; } .slider { width: auto; height: 100%; display: flex; position: absolute; top: 0; left: 0; transition: all .5s; } .slideBar { width: 100%; height: 60px; position: absolute; background-color: #f09f07; bottom: 0; left: 0; padding: 0 60px; display: flex; align-items: center; justify-content: space-between; } .slideBar span { width: 40px; height: 40px; border-radius: 50%; background-color: #fff; display: grid; place-items: center; color: green; cursor: pointer; } .card { width: 550px; height: 290px; padding: 40px 50px; display: flex; flex-direction: column; justify-content: space-between; position: relative; } .card::after { content: " "; position: absolute; width: 110px; height: 110px; background-color: green; top: 0; right: 0; border-bottom-left-radius: 100%; } .profile { display: flex; align-items: center; } .profile img { width: 100px; height: 100px; border-radius: 50%; margin-right: 25px; } .name_job h2 { color: #0066ac; margin-bottom: 4px; } .card p { font-size: 15px; line-height: 22px; opacity: .9; }
 <html> <body> <section class="customer-testimonials"> <div class="row"> <h2>Customer Testimonials</h2> </div> <div class="container"> <div class="slider"> <div class="card"> <div class="profile"> <img src="resources/img/danny-blinks.jpg" alt="dannyblinks"> <div class="name_job"> <h3>Danny Blinks</h3> <p>Lorem ipsum dolor sit</p> </div> </div> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, quibusdam! Exercitationem eveniet molestiae itaque velit cum! Temporibus quod qui provident, doloribus laboriosam, esse nihil incidunt, atque doloremque sunt ab libero.</p> </div> <div class="card"> <div class="profile"> <img src="resources/img/jenny%20lawrence.jpg" alt="jennylawrence"> <div class="name_job"> <h3>Jenny Lawrence</h3> <p>Lorem ipsum dolor sit</p> </div> </div> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, quibusdam! Exercitationem eveniet molestiae itaque velit cum! Temporibus quod qui provident, doloribus laboriosam, esse nihil incidunt, atque doloremque sunt ab libero.</p> </div> </div> <div class="slideBar"> <span class="leftArrow"><i class="ion-ios-arrow-thin-left"></i></span> <span class="rightArrow"><i class="ion-ios-arrow-thin-right"></i></span> </div> </div> </section> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="resources/js/main.js"></script> </body> </html>

1 answers

solution1
 1  2022-05-21 01:36:22

There is a couple of error and typos in your logic, let's fix them:

  1. document.getElementsByClassName() returns a collection of elements with specified class, you're trying to access style property without indicating what item in the resulted collection you need to modify. For this to work, access the element in the resulted array by indicating the index document.getElementsByClassName("leftArrow")[0]; , or simply get the element by its id.
  2. There is a typo trying to use leftArrow , you typed leftArrowt , fix that.
  3. You are assigning values instead of comparing in your conditionals. if(a = 0) is assignment and your in block is expecting a condition. Use == or === depending your needs for this specific case. See this documentation

 const leftArrow = document.getElementsByClassName("leftArrow")[0]; const rightArrow = document.getElementsByClassName("rightArrow")[0]; const slider = document.getElementsByClassName("slider")[0]; let a = 0; rightArrow.style.visibility = "hidden"; leftArrow.onclick = function() { a = a - 550; slider.style.left = a + "px"; //right arrow if (a == 0) { rightArrow.style.visibility = "hidden"; } else { rightArrow.style.visibility = "visible"; } // left arrow if (a == -1650) { leftArrow.style.visibility = "hidden"; } else { leftArrow.style.visibility = "visible"; } }; rightArrow.onclick = function() { a = a + 550; slider.style.left = a + "px"; //right arrow if (a == 0) { rightArrow.style.visibility = "hidden"; } else { rightArrow.style.visibility = "visible"; } // left arrow if (a == -1650) { leftArrow.style.visibility = "hidden"; } else { leftArrow.style.visibility = "visible"; } };
 .slider{ width: auto; height: 100%; display: flex; position: absolute; top: 0; left: 0; transition: all .5s; } .slideBar { width: 100%; height: 60px; position: absolute; background-color: #f09f07; bottom: 0; left: 0; padding: 0 60px; display: flex; align-items: center; justify-content: space-between; } .slideBar span{ width: 40px; height: 40px; border-radius: 50%; background-color: #fff; display: grid; place-items: center; color: green; cursor: pointer; } .card { width: 550px; height: 290px; padding: 40px 50px; display: flex; flex-direction: column; justify-content: space-between; position: relative; } .card::after{ content: " "; position: absolute; width: 110px; height: 110px; background-color: green; top: 0; right: 0; border-bottom-left-radius: 100%; } .profile { display: flex; align-items: center; } .profile img{ width: 100px; height: 100px; border-radius: 50%; margin-right: 25px; } .name_job h2{ color: #0066ac; margin-bottom: 4px; } .card p{ font-size: 15px; line-height: 22px; opacity: .9; } customer-testimonials { background-image:linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img/customer-testimonialbg.jpg); background-size: cover; background-position: center; height: 100vh; background-attachment: fixed; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; } .container{ width: 550px; height: 330px; border-radius: 12px; box-shadow: 0 5px 55px rgba(51, 51, 51, 0.336); position: relative; overflow: hidden; }
 <section class="customer-testimonials"> <div class="row"> <h2>Customer Testimonials</h2> </div> <div class="container"> <div class="slider"> <div class="card"> <div class="profile"> <img src="resources/img/danny-blinks.jpg" alt="dannyblinks"> <div class="name_job"> <h3>Danny Blinks</h3> <p>Lorem ipsum dolor sit</p> </div> </div> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, quibusdam! Exercitationem eveniet molestiae itaque velit cum! Temporibus quod qui provident, doloribus laboriosam, esse nihil incidunt, atque doloremque sunt ab libero.</p> </div> <div class="card"> <div class="profile"> <img src="resources/img/jenny%20lawrence.jpg" alt="jennylawrence"> <div class="name_job"> <h3>Jenny Lawrence</h3> <p>Lorem ipsum dolor sit</p> </div> </div> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, quibusdam! Exercitationem eveniet molestiae itaque velit cum! Temporibus quod qui provident, doloribus laboriosam, esse nihil incidunt, atque doloremque sunt ab libero.</p> </div> </div> <div class="slideBar"> <span class="leftArrow"><i class="ion-ios-arrow-thin-left"></i></span> <span class="rightArrow"><i class="ion-ios-arrow-thin-right"></i></span> </div> </div> </section> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="resources/js/main.js"></script>

Keep working, is almost done!

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to make fade in javascript slider? How to make this javascript slider loop to be random how to make an infinite loop? (slider javascript) How to make a javascript slider that slides automatically How to make slider from array of objects javascript? How to Make a Slider Witty like javascript? how to make simple slider of image in javascript How to make javascript slider automatically slide How to make slider take 100% of container with JavaScript? how to make javascript slider to automatically slide
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM