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

Code Review For Assignment-3 #1

Merged
sumitdml123 merged 8 commits from dev into master 2025-01-03 11:56:48 +00:00
Conversation 0 Commits 8 Files changed 12 +233
15 changed files with 233 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 5b72772dcc - Show all commits

3
.vscode/settings.json vendored Normal file
View file

@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}

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

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

@ -0,0 +1,72 @@
<!DOCTYPE html>
sumitdml123 commented 2024-12-30 12:56:20 +00:00
Review
Copy link

The alt text for images could be more descriptive to enhance SEO and accessibility further (e.g., instead of "Evil," write "Evil Genius Games").

The alt text for images could be more descriptive to enhance SEO and accessibility further (e.g., instead of "Evil," write "Evil Genius Games").
<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=""> </div>
<div class="swiper-slide"><img src="images/aws.png" alt=""></div>
<div class="swiper-slide"><img src="images/adobe1.png" alt=""> </div>
<div class="swiper-slide"><img src="images/magento.png" alt=""> </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 ></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. Through meticulous planning, implementation, and ongoing support, we helped Earthlink maintain its position as a frontrunner in the digital connectivity landscape.</p>
sumitdml123 commented 2024-12-30 12:55:51 +00:00
Outdated
Review
Copy link

extra

extra </p>
jaanvi commented 2025-01-03 05:50:11 +00:00
Outdated
Review
Copy link

done changes!

done changes!
</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>
<div class="swiper-pagination"></div>
sumitdml123 commented 2024-12-30 12:54:23 +00:00
Outdated
Review
Copy link

unused div

unused div
jaanvi commented 2025-01-03 05:46:59 +00:00
Outdated
Review
Copy link

this functionality is in use

this functionality is in use
</div>
<div class="swiper image-slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="images/involv.jpg" alt="Involvvely">
</div>
<div class="swiper-slide">
<img src="images/elink.jpg" alt="EarthLink">
</div>
<div class="swiper-slide">
<img src="images/evil.jpg" alt="Evil">
</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;
}

1
Jaanvi_DigiMantra_Task1 Submodule

@ -0,0 +1 @@
Subproject commit 53c1f3b76af01a23be69a18892e57db86a880d20

1
Multi-Step-Form_Task2 Submodule

@ -0,0 +1 @@
Subproject commit d858cfd6bda7d5671d3c7cc2df903da2f04422b2