How to use JavaScript Make a simple carousel switch
In page making, we can use native JavaScript Build a very simple carousel (or "slider").
This implementation is perfect for a basic website, and it is also a high-performance way to display content in a decent way.Once you have built these slides, you can add whatever you want to them;Text, images, videos, your name.
A simple color carousel built as shown in the following figure:
2.set up css Carousel style, set first slider-wrapper,slides-container and slide Class style, parent div.slider-wrapper To set overflow: hidden， Slideshow div.slides-container To set overflow: scroll; and display: flex， Make it display all the carousel content on one line, and overflow: scroll It can allow users to manually switch carousels to make them draggable, and one important property is scroll-behaviour， This is the property that allows the container to scroll smoothly to the next slide instead of moving immediately.Class Name div.slide-arrow It is to set the style of left and right toggle buttons.As shown below:
.slider-wrapper { margin: 100px; position: relative; overflow: hidden; }
.slides-container { height: calc(100vh - 200px); width: 100%; display: flex; overflow: scroll; scroll-behavior: smooth; list-style: none; margin: 0; padding: 0; }
.slide-arrow { position: absolute; display: flex; top: 0; bottom: 0; margin: auto; height: 50px; background-color: white; border: none; width: 50px; padding: 0; cursor: pointer; opacity: 0.5; transition: opacity 100ms; }
.slide-arrow:hover, .slide-arrow:focus { opacity: 1; }
#slide-arrow-prev { left: 0;}
#slide-arrow-next { right: 0;}
.slide { width: 100%; height: 100%; flex: 1 0 100%; }
It should be noted that if the scroll bar is not needed, additional settings are required:
.slides-container {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
}
/* WebKit */
.slides-container::-webkit-scrollbar {
width: 0;
height: 0;
}
- use JavaScript Add slider function. The slider function involves two parts of logic, namely, when clicking the forward arrow, display the content of the next screen when clicking the back arrow, first obtain all elements of the slider, and then add the click event listener to the next button. When the button is clicked, the width value of a slide is obtained, and the added value of the width of the slide is obtained by increasing the scrollLeft Properties, a little adjustment can apply the same logic to the back arrow button, but using this method is not added to scrollLeft In the property, instead subtract the width of the slide so that you can move backward when the back arrow is pressed.
const slidesContainer = document.getElementById("slides-container");
const slide = document.querySelector(".slide");
const prevButton = document.getElementById("slide-arrow-prev");
const nextButton = document.getElementById("slide-arrow-next");
nextButton.addEventListener("click", () => {
const slideWidth = slide.clientWidth;
slidesContainer.scrollLeft += slideWidth;
});
prevButton.addEventListener("click", () => {
const slideWidth = slide.clientWidth;
slidesContainer.scrollLeft -= slideWidth;
});
The above is "How to use" shared by Suyou Network with everyone JavaScript Make a simple carousel switch", thank you very much for your patience to read this article, we will provide you with more information on reference, use or learning communication.We can also provide you with:Enterprise website construction, website imitation, website copying, imitation site, foreign trade website construction, foreign trade website construction, company official website productionFor services, our company serves customers with the service concept of "integrity, professionalism, pragmatism and innovation".If you need cooperation, please scan the code to consult, and we will serve you sincerely.
TAG Label:
