Skip to content

Instantly share code, notes, and snippets.

@aldoyh

aldoyh/index.html

Created July 9, 2025 02:52
Show Gist options
  • Save aldoyh/14332ef0335efbe68427469eda8bd75f to your computer and use it in GitHub Desktop.
Save aldoyh/14332ef0335efbe68427469eda8bd75f to your computer and use it in GitHub Desktop.
Download ZIP
Live News Bulletin💫 Carousel
Raw
index.html
<header class="header">
<!--ROW-->
<div class="header__row" role="row">
<div class="header__column">
<div class="header__logo">
<a href="#">Yummy <span>Company</span></a>
</div>
</div>
<div class="header__column">
<div class="header__phone">
<a href="#">
<i class="fab fa-whatsapp"></i>
+44 207 555 555
</a>
</div>
</div>
</div>
<!--ROW-->
</header>
<main class="slider">
<section class="slider__component js-slider">
<!--LOADER-->
<div class="slider__loader js-slider-loader" role="loader"></div>
<!--LOADER-->
<!--CONTROLS-->
<div class="slider__controls is-prev" role="controls">
<button type="button" class="js-slider-button-prev">
<i class="fas fa-long-arrow-alt-left"></i>
</button>
</div>
<div class="slider__controls is-next" role="controls">
<button type="button" class="js-slider-button-next">
<i class="fas fa-long-arrow-alt-right"></i>
</button>
</div>
<!--CONTROLS-->
<article class="slider__item" role="item" data-num="1">
<!--IMAGE-->
<div class="slider__item__image is-background">
<img src="https://images.pexels.com/photos/1279330/pexels-photo-1279330.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="website">
</div>
<!--IMAGE-->
<!--TEXT-->
<div class="slider__item__text">
<span>Eating yummy food</span>
<h1>Well thought out</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" role="button">
Let's go
</a>
</div>
<!--TEXT-->
</article>
<article class="slider__item" role="item" data-num="2">
<!--IMAGE-->
<div class="slider__item__image is-background">
<img src="https://images.pexels.com/photos/3756523/pexels-photo-3756523.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="website">
</div>
<!--IMAGE-->
<!--TEXT-->
<div class="slider__item__text">
<span>Eating yummy food</span>
<h1>Well thought out</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" role="button">
Let's go
</a>
</div>
<!--TEXT-->
</article>
<article class="slider__item" role="item" data-num="3">
<!--IMAGE-->
<div class="slider__item__image is-background">
<img src="https://images.pexels.com/photos/853006/pexels-photo-853006.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="website">
</div>
<!--IMAGE-->
<!--TEXT-->
<div class="slider__item__text">
<span>Eating yummy food</span>
<h1>Well thought out</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" role="button">
Let's go
</a>
</div>
<!--TEXT-->
</article>
<article class="slider__item" role="item" data-num="4">
<!--IMAGE-->
<div class="slider__item__image is-background">
<img src="https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="website">
</div>
<!--IMAGE-->
<!--TEXT-->
<div class="slider__item__text">
<span>Eating yummy food</span>
<h1>Well thought out</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" role="button">
Let's go
</a>
</div>
<!--TEXT-->
</article>
<article class="slider__item" role="item" data-num="5">
<!--IMAGE-->
<div class="slider__item__image is-background">
<img src="https://images.pexels.com/photos/1099680/pexels-photo-1099680.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="website">
</div>
<!--IMAGE-->
<!--TEXT-->
<div class="slider__item__text">
<span>Eating yummy food</span>
<h1>Well thought out</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" role="button">
Let's go
</a>
</div>
<!--TEXT-->
</article>
</section>
</main>
Raw
script.js
var Slider = function(){
var Images = function(){
$(".is-background").imgLiquid();
}
var Component = function(){
var $Slider = $('.js-slider');
// bind event listener first
$Slider.on('ready.flickity', function() {
// Loader...
TweenMax.to($('.js-slider-loader'), 1,{
delay: 0.5,
autoAlpha: 0,
ease: Expo.easeInOut,
onComplete: function(){
// Slider...
TweenMax.to($Slider, 0.5,{
delay: 0,
autoAlpha: 1,
ease: Expo.easeInOut
});
// Text...
TweenMax.to($('.slider__item__text h1'), 0.8,{
delay: 0.3,
autoAlpha: 1,
ease: Expo.easeInOut
});
TweenMax.to($('.slider__item__text p'), 0.8,{
delay: 0.6,
autoAlpha: 1,
ease: Expo.easeInOut
});
TweenMax.to($('.slider__item__text a'), 0.8,{
delay: 0.9,
autoAlpha: 1,
ease: Expo.easeInOut
});
}
});
});
$Slider.flickity({
cellAlign: 'left',
contain: true,
draggable: true,
cellSelector: '.slider__item',
wrapAround: true,
autoPlay: 3600,
pauseAutoPlayOnHover: false,
prevNextButtons: false
});
// Controls...
$('.js-slider-button-prev').on( 'click', function() {
$Slider.flickity('previous');
});
$('.js-slider-button-next').on( 'click', function() {
$Slider.flickity('next');
});
}
return{
init: function(){
Images();
Component();
}
};
}();
// Run...
Slider.init();
Raw
scripts
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/imgLiquid/0.9.944/js/imgLiquid-min.js"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script src="https://kit.fontawesome.com/4643810438.js"></script>
Raw
style.scss
* {
--color-primary: rgb(15,12,88);
--color-secundary: #03D694;
}
body{
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-smooth: always;
-webkit-font-smoothing: antialiased;
}
//= RESPONSIVE
@mixin media($breakpoint...){
@if index($breakpoint, Mobile){
@media (min-width: 0px) and (max-width: 768px) {
@content;
}
}
@if index($breakpoint, Tablet){
@media (min-width: 769px) and (max-width: 1024px) {
@content;
}
}
}
.header {
width: 100%;
top: 0px;
left: 0px;
z-index: 100;
position: fixed;
background-color: transparent;
}
.header__row{
display: flex;
align-items: center;
position: relative;
padding-top: 1rem;
padding-bottom: 1rem;
padding-left: 16px;
padding-right: 16px;
}
.header__column{
width: 50%;
position: relative;
}
.header__logo{
position: relative;
a{
font-family: 'Oswald', sans-serif;
color: white;
font-size: 2rem;
font-weight: 700;
letter-spacing: 0.03em;
text-decoration: none;
position: relative;
@include media(Mobile){
font-size: 1rem;
}
span{
font-family: 'Oswald', sans-serif;
color: white;
font-weight: 400;
position: relative;
}
}
}
.header__phone{
position: relative;
text-align: right;
a{
color: white;
font-family: 'Nunito', sans-serif;
font-weight: 400;
font-size: 1rem;
position: relative;
text-decoration: none;
transition: all 0.3s ease-in-out;
@include media(Mobile){
font-size: 0.8rem;
}
&:hover{
color: var(--color-secundary);
text-decoration: none;
transition: all 0.3s ease-in-out;
}
}
}
.slider{
width: 100%;
z-index: 5;
position: relative;
}
.slider__component{
width: 100vw;
height: 100vh;
z-index: 10;
position: relative;
opacity: 0;
visibility: hidden;
.flickity-page-dots{
width: calc(100% - 16.66666%);
left: 50%;
bottom: 8vh;
z-index: 35;
position: absolute;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
text-align: left;
li{
width: 16px;
height: 16px;
opacity: 0.8;
border: 2px solid white;
background-color: transparent;
transition: all 0.3s ease-in-out;
@include media(Mobile){
width: 12px;
height: 12px;
}
@include media(Tablet){
width: 14px;
height: 14px;
}
&.is-selected{
opacity: 1;
border: 2px solid white;
background-color: white;
transition: all 0.3s ease-in-out;
}
&:hover{
opacity: 1;
border: 2px solid white;
background-color: white;
transform: scale(1.2);
transition: all 0.3s ease-in-out;
}
}
}
}
.slider__loader{
width: 100%;
height: 100%;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
position: fixed;
overflow: hidden;
z-index: 30;
background-color: var(--color-primary);
}
.slider__item{
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 15;
position: relative;
}
.slider__item__image{
width: 100%;
height: 100%;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
position: absolute;
overflow: hidden;
z-index: 15;
&:before{
content: '';
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 18;
position: absolute;
background-color: rgba(0,0,0,0.5);
}
&:after{
content: '';
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 20;
position: absolute;
//background-color: rgba(15,12,88,0.3);
}
img{
opacity: 0;
visibility: hidden;
}
}
.slider__item__text{
width: calc(100% - 16.66666%);
top: 50%;
left: 50%;
z-index: 25;
position: absolute;
text-align: left;
transform: translate(-50%, -50%);
span{
color: white;
font-family: 'Nunito', sans-serif;
font-weight: 300;
font-size: 0.8rem;
letter-spacing: 0.06em;
text-transform: uppercase;
display: block;
position: relative;
padding-left: 10px;
margin-bottom: 8px;
&:before{
content: '';
top: 50%;
left: 0px;
width: 2px;
height: 100%;
position: absolute;
transform: translateY(-50%);
background-color: var(--color-secundary);
}
}
h1{
font-family: 'Nunito', sans-serif;
color: white;
font-size: 4vw;
font-weight: 800;
position: relative;
margin-bottom: 10px;
opacity: 0;
visibility: 0;
@include media(Mobile){
font-size: 8vw;
}
@include media(Tablet){
font-size: 6vw;
}
}
p{
font-family: 'Nunito', sans-serif;
color: white;
font-size: 1.2rem;
font-weight: 400;
width: 33.33333%;
position: relative;
margin-bottom: 10px;
opacity: 0;
visibility: 0;
@include media(Mobile){
width: 100%;
}
@include media(Tablet){
width: 50%;
}
}
a{
font-family: 'Nunito', sans-serif;
color: white;
font-size: 1.4rem;
font-weight: 700;
text-decoration: none;
display: inline-block;
position: relative;
margin-top: 35px;
padding: 0.8rem 2rem;
border: 0px;
border-radius: 5px;
transition: all 0.3s ease-in-out;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
background-color: var(--color-primary);
opacity: 0;
visibility: 0;
@include media(Mobile){
font-size: 1rem;
}
@include media(Tablet){
font-size: 1.2rem;
}
&:hover{
color: white;
background-color: var(--color-secundary);
text-decoration: none;
transition: all 0.3s ease-in-out;
}
}
}
.slider__controls{
top: 50%;
z-index: 30;
position: absolute;
transform: translateY(-50%);
@include media(Mobile){
display: none;
}
&.is-prev{
left: 0px;
}
&.is-next{
right: 0px;
}
button{
color: white;
font-size: 2rem;
cursor: pointer;
width: 54px;
height: 54px;
border: 0px;
border-radius: 0px;
padding: 0px;
position: relative;
text-align: center;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease-in-out;
@include media(Mobile){
font-size: 1.4rem;
width: 36px;
height: 36px;
}
@include media(Tablet){
font-size: 1.6rem;
width: 46px;
height: 46px;
}
&:hover{
color: var(--color-secundary);
transition: all 0.3s ease-in-out;
}
&:focus{
outline: 0px;
box-shadow: none;
border-radius: 0px;
}
}
}
Raw
styles
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/flickity@2/dist/flickity.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment