Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Welcome finish #35

Merged
merged 2 commits into from
Dec 29, 2023
Merged

Welcome finish #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
19d7249
add JS
cristinamacicasan Dec 28, 2023
c0ef141
finish
cristinamacicasan Dec 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 56 additions & 53 deletions src/carousel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,61 +1,64 @@
$(function() {
$(function () {
new Slider({
images: '.slider-1 img',
btnPrev: '.slider-1 .buttons .prev',
btnNext: '.slider-1 .buttons .next',
auto: false
images: '.slider-1 img',
btnPrev: '.slider-1 .buttons .prev',
btnNext: '.slider-1 .buttons .next',
auto: false,
});

new Slider({
images: '.slider-2 img',
btnPrev: '.slider-2 .buttons .prev',
btnNext: '.slider-2 .buttons .next',
auto: true,
rate: 2000
new Slider({
images: '.slider-2 img',
btnPrev: '.slider-2 .buttons .prev',
btnNext: '.slider-2 .buttons .next',
auto: true,
rate: 2000,
});
});

function Slider(obj) {
this.images = $(obj.images);
this.auto = obj.auto;
this.btnPrev = obj.btnPrev;
this.btnNext = obj.btnNext;
this.rate = obj.rate || 1000;

var i = 0;
var slider = this;

// The "Previous" button: to remove the class .shown, to show the previous image and to add the .shown class
this.prev = function () {
slider.images.eq(i).removeClass('shown');
i--;

if (i < 0) {
i = slider.images.length - 1;
}

slider.images.eq(i).addClass('shown');
}

// The "Next" button: to remove the class .shown, to show the next image and to add the .shown class
this.next = function () {
slider.images.eq(i).removeClass('shown');
i++;

if (i >= slider.images.length) {
i = 0;
}

slider.images.eq(i).addClass('shown');
}

// To add next and prev functions when clicking on the corresponding buttons
$(slider.btnPrev).on('click', function(){ slider.prev();});
$(slider.btnNext).on('click', function(){ slider.next();});

// For the automatic slider: this method calls the next function at the set rate
if (slider.auto) {
setInterval(slider.next, slider.rate);
this.images = $(obj.images);
this.auto = obj.auto;
this.btnPrev = obj.btnPrev;
this.btnNext = obj.btnNext;
this.rate = obj.rate || 1000;

var i = 0;
var slider = this;

// The "Previous" button: to remove the class .shown, to show the previous image and to add the .shown class
this.prev = function () {
slider.images.eq(i).removeClass('shown');
i--;

if (i < 0) {
i = slider.images.length - 1;
}
};


slider.images.eq(i).addClass('shown');
};

// The "Next" button: to remove the class .shown, to show the next image and to add the .shown class
this.next = function () {
slider.images.eq(i).removeClass('shown');
i++;

if (i >= slider.images.length) {
i = 0;
}

slider.images.eq(i).addClass('shown');
};

// To add next and prev functions when clicking on the corresponding buttons
$(slider.btnPrev).on('click', function () {
slider.prev();
});
$(slider.btnNext).on('click', function () {
slider.next();
});

// For the automatic slider: this method calls the next function at the set rate
if (slider.auto) {
setInterval(slider.next, slider.rate);
}
}
86 changes: 54 additions & 32 deletions src/partials/welcom.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,66 @@
<main class="main-container">
<div class="main-section">

<h1 class="welcome-title">Welcome to our collection of premium watches</h1>

<!--Carousel -->
<div class="slider slider-1">
<div class="photos">
<img
src="/src/images/editorconfig.png"
alt="clasic-hand-watch"
class="image"
/>
<img
src="/src/images/timex-watch.png"
alt="clasic-hand-watch"
class="image"
/>
<img
src="/src/images/omaega-watch.png"
alt="clasic-hand-watch"
class="image"
/>
<img
src="/src/images/omega-black-watch.png"
alt="clasic-hand-watch"
class="image"
/>
<img
src="/src/images/omega-blau-watch.png"
alt="clasic-hand-watch"
class="image"
/>

<!--Carousel -->
<div class="slider slider-1">
<div class="photos">
<img src="/src/images/editorconfig.png" alt="clasic-hand-watch" class="image" />
<img src="/src/images/timex-watch.png" alt="clasic-hand-watch" class="image" />
<img src="/src/images/omaega-watch.png" alt="clasic-hand-watch" class="image" />
<img src="/src/images/omega-black-watch.png" alt="clasic-hand-watch" class="image" />
<img src="/src/images/omega-blau-watch.png" alt="clasic-hand-watch" class="image" />

<div class="buttons">
<div class="prev"></div>
<div class="next"></div>
<div class="buttons">
<div class="prev"></div>
<div class="next"></div>
</div>
</div>
</div>
</div>



<p class="welcome-paragraph">
Our watches are not just timepieces, but also an expression of your personality and lifestyle. From classic designs to modern ones, we have a watch to suit every taste and occasion.
Our watches are not just timepieces, but also an expression of your
personality and lifestyle. From classic designs to modern ones, we have a
watch to suit every taste and occasion.
</p>




<picture class="welcome-picture">
<source media="(min-width: 1158px)" srcset="/src/images/arm-watches_d.png">
<source media="(min-width: 768px)" srcset="/src/images/arm-watches_t.png">
<source media="(max-width: 768px)" srcset="/src/images/arm-watches_m.png">
<img src="/src/images/arm-watches_m.png" alt="clasic-hand-watch watch">
</picture>





<picture class="welcome-picture">
<source
media="(min-width: 1158px)"
srcset="/src/images/arm-watches_d.png"
/>
<source
media="(min-width: 768px)"
srcset="/src/images/arm-watches_t.png"
/>
<source
media="(max-width: 768px)"
srcset="/src/images/arm-watches_m.png"
/>
<img src="/src/images/arm-watches_m.png" alt="clasic-hand-watch watch" />
</picture>
</div>
</main>
</main>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<script defer src="./carousel.js"></script>
Loading