senaduka/old-saburly-wagtail-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changing Carousel

Browse Source
This commit is contained in:
Amir
2024-09-15 18:36:35 +02:00
parent f4bd8739fd
commit 812cb56d2d
5 changed files with 82 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
static/css/style.css
View File

@@ -198,9 +198,7 @@ body.side-menu.active {
.content-open:before {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: -2000000000px;
bottom: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 99;
@@ -223,38 +221,27 @@ body.side-menu.active {
overflow: hidden;
}
.carousel-slider{
.carousel-slider {
width: 100%;
height: 130px;
overflow: hidden;
}
.carousel-slider .carousel-list{
.carousel-list {
display: flex;
flex-wrap: nowrap;
transition: transform 0.5s ease-in-out;
width: 100%;
min-width: calc(100px * 16);
position: relative;
}
.carousel-slider .carousel-list .carousel-item{
width: 100px;
height: 100px;
position: absolute;
left: 100%;
animation: autoRun 16s linear infinite;
animation-delay: calc((16s / 16) * (var(--position) - 1));
}
.carousel-slider .carousel-list .carousel-item img{
width: 100%;
}
@keyframes autoRun {
from{
left: 100%;
}to{
left: calc(100px * -1);
.carousel-item {
width: calc(100% / 6);
flex: 0 0 calc(100% / 6);
text-align: center;
}
@media only screen and (max-width: 768px) {
.carousel-item {
width: calc(100% / 3);
flex: 0 0 calc(100% / 3);
}
}
.carousel-slider:hover .carousel-item{
animation-play-state: paused!important;
}
}

11
static/js/carousel.js Normal file
View File

@@ -0,0 +1,11 @@
function moveCarousel() {
const carouselSlider = document.querySelector('.carousel-slider');
const carouselList = document.querySelector('.carousel-list');
const carouselItems = document.querySelectorAll('.carousel-item');
const firstItem = carouselItems[0];
carouselList.removeChild(firstItem);
carouselList.appendChild(firstItem);
}
setInterval(moveCarousel, 3000);

49
static/js/index.js Normal file
View File

@@ -0,0 +1,49 @@
document.addEventListener('DOMContentLoaded', function() {
const sideToggle = document.querySelector('.side-toggle');
const sideMenu = document.querySelector('.side-menu');
const sideCloseButtons = document.querySelectorAll('.side-close');
const content = document.querySelector('.content');
const headermove = document.getElementById('header');
const body = document.body;
const footermove = document.getElementById('footer');
sideToggle.addEventListener('click', function() {
sideMenu.classList.toggle('active');
this.classList.toggle('menu-opened');
content.classList.toggle('content-open');
headermove.classList.toggle('header-move');
body.classList.toggle('block-scroll');
footermove.classList.toggle('header-move');
});
sideCloseButtons.forEach(button => {
button.addEventListener('click', function() {
sideMenu.classList.remove('active');
sideToggle.classList.remove('menu-opened');
content.classList.remove('content-open');
headermove.classList.remove('header-move');
body.classList.remove('block-scroll');
footermove.classList.remove('header-move');
});
});
})
var prevScrollPos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
const getHeaderHeight = document.getElementById('header')
const headerPosition = header.offsetTop + header.offsetHeight;
if (prevScrollPos < currentScrollPos && currentScrollPos > headerPosition ) {
document.getElementById("header").classList.add("header-hidden");
document.getElementById("header").classList.remove("header-visible");
}
else {
document.getElementById("header").classList.add("header-visible");
document.getElementById("header").classList.remove("header-hidden");
}
prevScrollPos = currentScrollPos;
};

64
templates/base.html
View File

@@ -6,15 +6,8 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{% block title %}Saburly - {{ self.title }}{% endblock %}</title>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"/>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
{% load static %}
<link rel="stylesheet" href="{% static './css/style.css' %}">
<link rel="shortcut icon" type="image/png" href="{% static './images/favicon32.png' %}">
@@ -31,58 +24,7 @@
</div>
{% include 'footer.html' %}
</main>
<script>
//side menu
document.addEventListener('DOMContentLoaded', function() {
const sideToggle = document.querySelector('.side-toggle');
const sideMenu = document.querySelector('.side-menu');
const sideCloseButtons = document.querySelectorAll('.side-close');
const content = document.querySelector('.content');
const headermove = document.getElementById('header');
const body = document.body;
const footermove = document.getElementById('footer');
sideToggle.addEventListener('click', function() {
sideMenu.classList.toggle('active');
this.classList.toggle('menu-opened');
content.classList.toggle('content-open');
headermove.classList.toggle('header-move');
body.classList.toggle('block-scroll');
footermove.classList.toggle('header-move');
});
sideCloseButtons.forEach(button => {
button.addEventListener('click', function() {
sideMenu.classList.remove('active');
sideToggle.classList.remove('menu-opened');
content.classList.remove('content-open');
headermove.classList.remove('header-move');
body.classList.remove('block-scroll');
footermove.classList.remove('header-move');
});
});
})
//header
var prevScrollPos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
const getHeaderHeight = document.getElementById('header')
const headerPosition = header.offsetTop + header.offsetHeight;
if (prevScrollPos < currentScrollPos && currentScrollPos > headerPosition ) {
document.getElementById("header").classList.add("header-hidden");
document.getElementById("header").classList.remove("header-visible");
}
else {
document.getElementById("header").classList.add("header-visible");
document.getElementById("header").classList.remove("header-hidden");
}
prevScrollPos = currentScrollPos;
};
</script>
<script src="{%static './js/index.js'%}"></script>
<script src="{%static './js/carousel.js'%}"></script>
</body>

5
templates/services/services_page.html
View File

@@ -85,10 +85,9 @@
{{ page.section_four_img|richtext }}
</div>
</div>
</div>
</div>
<div class="container mx-auto px-4 py-6">
<div class="container mx-auto px-4 pb-5">
<div class="relative">
<div class="carousel-slider">
<div class="carousel-list">
@@ -96,7 +95,7 @@
{% if item.carousel_image %}
<div class="carousel-item" style="--position:{{forloop.counter}}">
<img src="{{ item.carousel_image.file.url }}" alt="{{ item.carousel_name }}" class="w-full h-auto object-cover">
<p class="text-center">{{ item.carousel_name }}</p>
<p class="text-center ">{{ item.carousel_name }}</p>
</div>
{% endif %}
{% endfor %}