jaanvi/Swiper-Sliders
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: jaanvi:833c0dd6f05874da5a44ba6fd417246b47bd66ac
Branches Tags
jaanvi:master
jaanvi:dev
..
compare: jaanvi:2c5517e463ce71e482d5fb155d152c081782c7f4
Branches Tags
jaanvi:master
jaanvi:dev

9 commits
833c0dd6f0 ... 2c5517e463

Author SHA1 Message Date
Sumit Kumar 2c5517e463 Merge pull request 'Code Review For Assignment-3' (#1) from dev into master 
Reviewed-on: #1
Reviewed-by: Sumit Kumar <sumit.kumar@digimantra.com>
 2025-01-03 11:56:48 +00:00
jaanvi 57f0dbfc7e Update Assignment-3 1/Assignment-3/index.html 2025-01-03 05:49:33 +00:00
jaanvi f849493b69 Update Assignment-3 1/Assignment-3/index.html 2025-01-03 05:11:28 +00:00
jaanvi 454f381318 Update Assignment-3 1/Assignment-3/index.html 2025-01-03 05:05:47 +00:00
jaanvi 3725140ae5 Update Assignment-3 1/Assignment-3/index.html 2025-01-03 05:03:59 +00:00
jaanvi bc1aac3146 Removed folder from repository 2024-12-30 13:52:05 +05:30
jaanvi c2b5cac1e9 Removed folder from repository 2024-12-30 13:50:49 +05:30
jaanvi 163147aa08 Remove duplicated directory 2024-12-30 13:46:48 +05:30
jaanvi 5b72772dcc first dev commit 2024-12-30 13:37:06 +05:30
12 changed files with 229 additions and 0 deletions
Show stats Expand all files Collapse all files

BIN
Assignment-3 1/Assignment-3/images/adobe.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3 KiB

BIN
Assignment-3 1/Assignment-3/images/adobe1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
Assignment-3 1/Assignment-3/images/aws.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
Assignment-3 1/Assignment-3/images/elink.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 247 KiB

BIN
Assignment-3 1/Assignment-3/images/evil.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 101 KiB

BIN
Assignment-3 1/Assignment-3/images/involv.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 323 KiB

BIN
Assignment-3 1/Assignment-3/images/magento.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
Assignment-3 1/Assignment-3/images/microsoft.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
Assignment-3 1/Assignment-3/images/shopify.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.5 KiB

73
Assignment-3 1/Assignment-3/index.html Normal file
View file

@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<link rel="stylesheet" href="style.css">
<title>Slider-Assignment-3</title>
</head>
<body>
<div class="container">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/microsoft.png" alt="microsoft"> </div>
<div class="swiper-slide"><img src="images/aws.png" alt="aws"></div>
<div class="swiper-slide"><img src="images/adobe1.png" alt="adobe"> </div>
<div class="swiper-slide"><img src="images/magento.png" alt="magento"> </div>
</div>
</div>
</div>
<!--Feature Project-->
<div class="featured-projects-section">
<h2 class="project-title">Featured Projects</h2>
<div class="project-container">
<div class="swiper info-slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<h3>Involvvely Parenting Resource</h3>
<p>Involvvely functions as a comprehensive Parent Resource and school platform, fosteringconnections among community parents. Our team played a pivotal role in developing and designing their platform, ensuring seamless integration and user-friendly interfaces. Our technical contributions streamlined Involvvely's platform, allowing parents to get more involved in their children's education using their innovative ideas.</p>
</div>
<div class="swiper-slide">
<h3 >EarthLink Fiber Internet</h3>
<p>Earthlink epitomizes leadership in digital innovation, seamlessly blending advanced technology with unbeatable connectivity. Our team led the development and design efforts for their digital infrastructure, ensuring seamless integration and optimal performance. Earthlink maintain its position as a frontrunner in the digital connectivity landscape.</p>
</div>
<div class="swiper-slide">
<h3 >Evil Genius Games</h3>
<p >Evil Genius Games invites players to dive into captivating tabletop RPG experiences, seamlessly blending strategic depth with immersive gameplay. Our team led the development of their digital platform, ensuring intuitive interfaces and dynamic mechanics. Our collaboration has solidified Evil Genius Games as an industry leader in immersive gaming experiences.</p>
</div>
</div>
<!--Functionality available-->
<div class="swiper-pagination"></div>
</div>
<div class="swiper image-slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="images/involv.jpg" alt="Involvvely Parenting Resource">
</div>
<div class="swiper-slide">
<img src="images/elink.jpg" alt="EarthLink Fiber Internet">
</div>
<div class="swiper-slide">
<img src="images/evil.jpg" alt="Evil Genius Games">
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>

65
Assignment-3 1/Assignment-3/script.js Normal file
View file

@ -0,0 +1,65 @@
const swiper = new Swiper(".container .swiper",{
spaceBetween: 30,
slidesPerView: "auto",
loop: true,
speed: 4000,
freeMode: true,
allowTouchMove: false,
autoplay: {
delay: 0,
disableOnInteraction: false,
}
});
function stopAutoplay() {
const swiperTranslate = swiper.getTranslate();
swiper.setTranslate(swiperTranslate);
swiper.autoplay.stop();
}
function startAutoplay() {
swiper.slideTo(swiper.activeIndex, 2000, false);
swiper.autoplay.start();
}
const container = document.querySelector(".swiper");
container.addEventListener("mouseenter",() => stopAutoplay());
container.addEventListener("mouseleave",() => startAutoplay());
//Featured Slider
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,
});
const infoSlider = new Swiper(".info-slider", {
loop: true,
autoplay:false,
grabCursor: true,
allowTouchMove: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
imageSlider.controller.control = infoSlider;
infoSlider.controller.control = imageSlider;

91
Assignment-3 1/Assignment-3/style.css Normal file
View file

@ -0,0 +1,91 @@
html, body {
margin:0;
}
.container {
width: 100vw;
height: 10vh;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
display: flex;
overflow: hidden;
border-radius: 10px;
/* box-shadow: 0 4px 8px rgba(9, 9, 9, 0.4); */
}
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: contain;
}
body {
font-family: Arial, sans-serif;
background-color: #fff;
}
.featured-projects-section {
width: 70%;
height: 70%;
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;
/* border-radius: 10px; */
/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
width: 100%;
}
.info-slider .swiper-slide h3 {
font-size: 24px;
margin-bottom: 10px;
color: #333;
}
.info-slider .swiper-slide p {
font-size: 16px;
color: #555;
}
.project-container .swiper {
margin-top: 30px;
width: 100%;
height: 500px;
}