Swiper Slider

commit 5772a71dff4e78e92732f17a38f053d27ea8bb13 Author: Eknoor Singh Date: Tue Dec 31 10:25:10 2024 +0530 Latest Changes diff --git a/assets/adobe.png b/assets/adobe.png new file mode 100644 index 0000000..4997b8f Binary files /dev/null and b/assets/adobe.png differ diff --git a/assets/adobe1.png b/assets/adobe1.png new file mode 100644 index 0000000..d80262c Binary files /dev/null and b/assets/adobe1.png differ diff --git a/assets/aws.png b/assets/aws.png new file mode 100644 index 0000000..0a3e565 Binary files /dev/null and b/assets/aws.png differ diff --git a/assets/client2.svg b/assets/client2.svg new file mode 100644 index 0000000..4ef4683 --- /dev/null +++ b/assets/client2.svg @@ -0,0 +1,13 @@ + diff --git a/assets/elink.jpg b/assets/elink.jpg new file mode 100644 index 0000000..2c1812c Binary files /dev/null and b/assets/elink.jpg differ diff --git a/assets/evil.jpg b/assets/evil.jpg new file mode 100644 index 0000000..4d1b163 Binary files /dev/null and b/assets/evil.jpg differ diff --git a/assets/img1.jpg b/assets/img1.jpg new file mode 100644 index 0000000..e2e0900 Binary files /dev/null and b/assets/img1.jpg differ diff --git a/assets/img2.jpg b/assets/img2.jpg new file mode 100644 index 0000000..d0dda95 Binary files /dev/null and b/assets/img2.jpg differ diff --git a/assets/img3.png b/assets/img3.png new file mode 100644 index 0000000..7a7b536 Binary files /dev/null and b/assets/img3.png differ diff --git a/assets/involv.jpg b/assets/involv.jpg new file mode 100644 index 0000000..5d69da3 Binary files /dev/null and b/assets/involv.jpg differ diff --git a/assets/magento.png b/assets/magento.png new file mode 100644 index 0000000..f3840f5 Binary files /dev/null and b/assets/magento.png differ diff --git a/assets/microsoft.png b/assets/microsoft.png new file mode 100644 index 0000000..e4c3a03 Binary files /dev/null and b/assets/microsoft.png differ diff --git a/assets/shopify.png b/assets/shopify.png new file mode 100644 index 0000000..92c50a8 Binary files /dev/null and b/assets/shopify.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..a06e57f --- /dev/null +++ b/index.html @@ -0,0 +1,75 @@ + + + + + Swiper Slider + + + + + +

Our Partners

+ +

Featured Projects

+ +

EarthLink Fiber Internet

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit animi, officia optio neque temporibus excepturi doloremque libero deleniti molestiae possimus cumque similique autem rerum eaque! Dolores quidem provident officiis ea!

+ +

Evil Genius Games

Involvvely Parenting Resource

+ + +

+ +

+ + + + + \ No newline at end of file diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..22080c3 --- /dev/null +++ b/js/script.js @@ -0,0 +1,44 @@ +const partnersSlider = new Swiper('.partners-slider .swiper', { + direction: 'horizontal', + loop: true, + autoplay: { + delay: 800, + disableOnInteraction: false, + }, +}); + +const partnersSliderElement = document.querySelector('.partners-slider .swiper'); +if (partnersSliderElement) { + partnersSliderElement.addEventListener('mouseenter', () => partnersSlider.autoplay.stop()); + partnersSliderElement.addEventListener('mouseleave', () => partnersSlider.autoplay.start()); +} + +const imageSlider = new Swiper(".image-slider", { + loop: true, + slidesPerView: 3, + centeredSlides: true, + effect: "coverflow", + coverflowEffect: { + rotate: 0, + depth: 200, + stretch: 30, + modifier: 1, + scale: 1, + slideShadows: false, + }, + grabCursor: true, + allowTouchMove: true, +}); + +const infoSlider = new Swiper(".info-slider", { + loop: true, + grabCursor: true, + allowTouchMove: true, + pagination: { + el: '.swiper-pagination', + clickable: true, + }, +}); + +imageSlider.controller.control = infoSlider; +infoSlider.controller.control = imageSlider; \ No newline at end of file diff --git a/style/index.css b/style/index.css new file mode 100644 index 0000000..b6a9afb --- /dev/null +++ b/style/index.css @@ -0,0 +1,111 @@ +body { + display: flex; + flex-direction: column; + align-items: center; + background-color: #f9f9f9; + margin: 0; + font-family: Arial, sans-serif; +} + +.slider-one-heading { + text-align: center; + margin: 20px 0; +} + +.slider-one-heading p { + font-size: 24px; + font-weight: bold; + color: #333; + margin: 0; +} + +.swiper-container { + width: 50%; + height: auto; +} + +.swiper { + width: 100%; + height: 300px; + border-radius: 10px; + overflow: hidden; + background-color: #fff; +} + +.swiper-slide { + display: flex; + align-items: center; + justify-content: center; + background-color: transparent; + width: 50%; + height: 100%; +} + +.swiper-slide img { + max-width: 100%; + max-height: 100%; + object-fit: contain; + border-radius: 10px; + padding: 50px; +} + +.featured-projects-section { + width: 70%; + height: auto; + margin: 0 auto; + margin-top: 10px; + padding: 10px 0; +} + +.project-title { + font-size: 26px; + margin-bottom: 20px; + text-align: center; +} + +.project-container { + display: flex; +} + +.image-slider .swiper-slide img { + width: 100%; + height: 100%; + object-fit: contain; + border-radius: 10px; + +} + +.info-slider .swiper-slide { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + text-align: left; + padding: 0px; + background-color: #ffffff; + width: 100%; + /* opacity: 0.8; */ + +} + +.info-slider .swiper-slide h3 { + font-size: 24px; + margin-bottom: 10px; + color: #333; + margin-left: 50px; + /* opacity: 0.8; */ +} + +.info-slider .swiper-slide p { + font-size: 16px; + color: #555; + margin-left: 50px; + + +} + +.project-container .swiper { + margin-top: 30px; + width: 100%; + height: 500px; +}