JavaScript spin slider | JavaScript spin slider using HTML CSS and JavaScript | Codewithrandom

JavaScript spin slider  | JavaScript spin slider using HTML CSS and JavaScript | Codewithrandom

Learners, This is a new project in javascript but it is above that it has a unique design containing it. Let 
me explain it basic idea behind the project have you ever enjoyed the spin roller game in your childhood.  This is the game preview hop you have remembered your childhood memories.
                      

In this project, we have something similar designing as we will have two arrows at the two ends of any one of the conical sections. when you will click on the forward arrow it will rotate circularly and will show you the next image.

If you don’t know How we can design so just join me on this blog and make sure your finger is free for scrolling down 😉.



Hey learners..!


Welcome to our 🎊 today’s blog with code with random. In this blog, we gonna learn how we can design a JavaScript spin slider.


I hope you must have got an idea about the project.


Let’s have a look at our project.

These are three images it comes after one another in rotating mode.



HTML SECTION 

Here I’m not going to add a structure of the HTML file from scratch, I will just paste the body part, it is so because the body is the main part of our designing a browser.


We have the following part in the HTML section.
  • First, we have a section as a container that will cover all images and the rotator.
  • Then we have list items in the unordered list within the section.
  • In each list item, we have set the background image within div.
  • In the end, we have some CDN plugins.
Go through the below code 👇 and run it in your IDE or where you used to design just HTML without CSS styling.

  </head>  
<body>
<section class="slideshow">
<ul class="navigation">
<li class="navigation-item active">
<span class="rotate-holder"></span>
<span class="background-holder" style="background-image: url(assets/img/img-1.jpeg);"></span>
</li>
<!-- slideshow:navigation:item END -->
<!-- slideshow:navigation:item START -->
<li class="navigation-item">
<span class="rotate-holder"></span>
<span class="background-holder" style="background-image: url(assets/img/statue.jpg);"></span>
</li>
<li class="navigation-item">
<span class="rotate-holder"></span>
<span class="background-holder" style="background-image: url(assets/img/img-3.jpg);"></span>
</li>
<li class="navigation-item">
<span class="rotate-holder"></span>
<span class="background-holder" style="background-image: url(assets/img/img-4.jpeg);"></span>
</li>
<li class="navigation-item">
<span class="rotate-holder"></span>
<span class="background-holder" style="background-image: url(assets/img/img-5.jpg);"></span>
</li>
<li class="navigation-item">
<span class="rotate-holder"></span>
<span class="background-holder" style="background-image: url(assets/img/img-6.jpg);"></span>
</li>
<li class="navigation-item">
<span class="rotate-holder"></span>
<span class="background-holder" style="background-image: url(assets/img/hong.jpg);"></span>
</li>
<li class="navigation-item">
<span class="rotate-holder"></span>
<span class="background-holder" style="background-image: url(assets/img/img-8.jpeg);"></span>
</li>
<li class="navigation-item">
<span class="rotate-holder"></span>
<span class="background-holder" style="background-image: url(assets/img/img-9.jpg);"></span>
</li>
</ul>
<div class="detail">
<div class="detail-item active">
<div class="headline">INDIA</div>
<div class="background" style="background-image: url(assets/img/img-1.jpeg); height: 100vh;"></div>
<div class="background" style="background-image: url(assets/img/img-1.jpeg); height: 100vh; background
background-position: center;"></div>
</div>
<!-- slideshow:details END -->
<!-- slideshow:details START -->
<div class="detail-item">
<div class="headline">AMERICA</div>
<div class="background" style="background-image: url(assets/img/statue.jpg);"></div>
</div>
<!-- slideshow:details END -->
<!-- slideshow:details START -->
<div class="detail-item">
<div class="headline">LONDON</div>
<div class="background" style="background-image: url(assets/img/img-3.jpg);"></div>
</div>
<!-- slideshow:details END -->
<!-- slideshow:details START -->
<div class="detail-item">
<div class="headline">JAPAN</div>
<div class="background" style="background-image: url(assets/img/img-4.jpeg);"></div>
</div>
<!-- slideshow:details END -->
<!-- slideshow:details START -->
<div class="detail-item">
<div class="headline">PARIS</div>
<div class="background" style="background-image: url(assets/img/img-5.jpg);"></div>
</div>
<!-- slideshow:details END -->
<!-- slideshow:details START -->
<div class="detail-item">
<div class="headline">SINGAPORE</div>
<div class="background" style="background-image: url(assets/img/img-6.jpg);"></div>
</div>
<!-- slideshow:details END -->
<!-- slideshow:details START -->
<div class="detail-item">
<div class="headline">Sydney</div>
<div class="background" style="background-image: url(assets/img/hong.jpg);"></div>
</div>
<!-- slideshow:details END -->
<!-- slideshow:details START -->
<div class="detail-item">
<div class="headline">Istanbul</div>
<div class="background" style="background-image: url(assets/img/img-8.jpeg);"></div>
</div>
<!-- slideshow:details END -->
<!-- slideshow:details START -->
<div class="detail-item">
<div class="headline">Hong Kong</div>
<div class="background" style="background-image: url(assets/img/img-9.jpg);"></div>
</div>
<!-- slideshow:details END -->
</div>
<!-- slideshow:details END -->
</section>
<!-- slideshow END -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4.1.4/imagesloaded.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/TextPlugin.min.js"></script>
<script src="assets/js/demo.js"></script>
</body>
</html>

CSS SECTION 


By CSS we will design our rotator and set our background image as cover and hide half of the circle spinner.

and we will also hide text written for the specific areas.


The Below code will analyze you more👇. So just add in your HTML half complete file and wait to watch some magic.

 

  body header {  
background-color: transparent;
font-family: 'Oswald', sans-serif;
position: fixed;
display: block;
width: 100%;
height: 48px;
top: 0;
right: 0;
left: 0;
z-index: 90;
}
body header .header-inner {
padding: 12px 1.5%;
}
body header .header-inner .logo {
position: relative;
display: inline;
width: auto;
height: auto;
float: left;
}
body header .header-inner .logo a {
position: relative;
display: inline;
width: auto;
height: auto;
color: #FFFFFF;
outline: 0px none;
outline: 0px;
text-decoration: none;
transition: all 0.35s ease-in-out;
text-transform: uppercase;
}
body header .header-inner .logo a:hover {
color: rgba(255, 255, 255, 0.45);
}
body header .header-inner .logo a span {
font-weight: 700;
}
body header .header-inner nav {
position: relative;
display: inline;
margin: 0;
padding: 0;
list-style-type: none;
float: right;
}
body header .header-inner nav li {
position: relative;
display: inline;
margin-left: 16px;
}
body header .header-inner nav li a {
font-family: 'Oswald', sans-serif;
position: relative;
font-size: 13px;
color: #FFFFFF;
text-decoration: none;
line-height: 24px;
transition: all 0.35s ease-in-out;
}
body header .header-inner nav li a span {
position: relative;
z-index: 2;
}
body header .header-inner nav li a:hover {
color: rgba(255, 255, 255, 0.45);
}
body section.slideshow {
position: relative;
display: block;
width: 100%;
height: 100%;
height: 100vh;
margin: 0 auto;
visibility: hidden;
overflow: hidden;
}
body section.slideshow ul.navigation {
position: absolute;
display: block;
width: 640px;
height: 640px;
padding: 0;
margin: 0;
left: -230px;
top: 50%;
margin-top: -320px;
z-index: 10;
}
body section.slideshow ul.navigation li.navigation-item {
position: absolute;
display: inline-block;
overflow: hidden;
width: 120px;
height: 120px;
padding: 10px;
text-align: center;
cursor: pointer;
border-radius: 50%;
transition: border 0.6s ease-in-out;
}
body section.slideshow ul.navigation li.navigation-item .rotate-holder {
position: fixed;
display: block;
width: 0;
height: 0;
left: -9999px;
top: -9999px;
}
body section.slideshow ul.navigation li.navigation-item .background-holder {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
visibility: visible;
transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
}
body section.slideshow ul.navigation li.navigation-item:hover .background-holder {
opacity: 0.75;
}
body section.slideshow ul.navigation li.navigation-item.active .background-holder {
opacity: 0;
visibility: hidden;
}
body section.slideshow .detail {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 8;
}
body section.slideshow .detail .detail-item {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
body section.slideshow .detail .detail-item .headline {
position: absolute;
display: block;
width: 100%;
max-width: calc(100% - 480px);
height: 126px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: visible;
white-space: nowrap;
box-sizing: border-box;
z-index: 2;
}
body section.slideshow .detail .detail-item .headline .letter {
font-family: 'Oswald', sans-serif;
position: relative;
display: inline-block;
opacity: 0;
visibility: hidden;
color: #FFFFFF;
font-size: 132px;
line-height: 110px;
font-weight: 900;
font-kerning: none;
white-space: nowrap;
box-sizing: border-box;
text-transform: uppercase;
}
body section.slideshow .detail .detail-item .background {
position: absolute;
display: block;
width: 100%;
width: calc(100% + 100px);
height: 100%;
height: calc(100% + 100px);
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: visible;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
z-index: 1;
}
body section.slideshow .detail .detail-item .background::before {
content: "";
background: linear-gradient(to right, black 0%, rgba(0, 0, 0, 0) 90%);
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
body section.slideshow .detail .detail-item.active {
opacity: 1;
visibility: visible;
}

Javascript section 

In the Javascript part, Before that rest of the things are just designing overview it doesn’t mean anything without this javascript code because this is the code that is making alive.

In javascript code logic are not so much complicated, here is also similar logic that we have of been used in our earlier projects.

Here when you will click the forward arrow then by event listener click it will rotate the circle by 30deg and in increasing order.

 

After the first rotation, it will stop after 30deg and as per the embedded image it will update the background image and at the circle part, it will display the image country name rest of the things will be on hide mode.

For observing this magic for this project then you should add the js file with the rest of HTML and CSS file and enjoy this project and deploy on github
 

 /**  
* demo.js
* https://coidea.website
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2018, COIDEA
* https://coidea.website
*/
$('.slideshow').imagesLoaded({ background: true })
.done( function() {
// hide loader
$('.loader').addClass('is-loaded');
// init variables
var slideshow = $(".slideshow"),
navigation = $(".navigation"),
navigationItem = $(".navigation-item"),
detailItem = $(".detail-item"),
rotation,
type = '_short';
// prepare letters
$('.headline').each(function() {
$(this).html($(this).text().replace(/([^x00-x80]|w)/g, "<span class='letter'>$&</span>"));
});
// prepare navigation and set navigation items on the right place
navigationItem.each(function(index, elem) {
TweenMax.set(elem, {
left: navigation.width() / 2 - navigationItem.width() / 2 - 10,
rotation: 90 + (index * 360 / navigationItem.length),
transformOrigin: "50% " + navigation.width() / 2 + "px"
});
TweenMax.set($(elem).find('.rotate-holder'), {
text: String(index * 360 / navigationItem.length)
});
TweenMax.set($(elem).find('.background-holder'), {
rotation: -90 - (index * 360 / navigationItem.length),
});
});
// set tween values
function setTweenValues() {
rotation = Number($(this).find('.rotate-holder').text());
}
// do tween
function doTween(target) {
var targetIndex = navigationItem.index(target),
timeline = new TimelineMax();
// add/remove class "active" from navigation & detail
navigationItem.each(function() {
$(this).removeClass('active');
if ($(this).index() == $(target).index()) {
$(this).addClass('active');
}
});
detailItem.each(function() {
$(this).removeClass('active');
if ($(this).index() == $(target).index()) {
$(this).addClass('active');
}
});
timeline
.to(navigation, 0.6, {
rotation: -rotation + type,
transformOrigin: "50% 50%",
ease: Sine.easeInOut
})
.staggerTo(navigationItem.find('.background-holder'), 0.6, {
cycle: {
//function that returns a value
rotation: function(index, element) {
return -90 - Number($(element).prev('.rotate-holder').text()) + rotation + type;
}
},
transformOrigin: "50% 50%",
ease: Sine.easeInOut,
}, 0, '-=0.6')
.staggerFromTo($('.active').find('.letter'), 0.3, {
autoAlpha: 0,
x: -100,
},
{
autoAlpha: 1,
x: 0,
ease: Sine.easeInOut,
}, 0.025, '-=0.3')
.fromTo($('.active').find('.background'), 0.9, {
autoAlpha: 0,
x: -100,
},
{
autoAlpha: 1,
x: 0,
ease: Sine.easeInOut,
}, 0.05, '+=0.3');
}
// click/hover on items
navigationItem.on('mouseenter', setTweenValues);
navigationItem.on('click', function() { doTween($(this)); })
// on load show slideshow as well as first "active" navigation/detail item
TweenMax.to(slideshow, 1, { autoAlpha: 1 });
TweenMax.to($('.active').find('.letter'), 0.7, { autoAlpha: 1, x: 0 });
TweenMax.to($('.active').find('.background'), 0.7, { autoAlpha: 1, x: 0 });
});
// fast fix for resize window and refresh view, attention: not use in production, only for demo purposes!
(function () {
var width = window.innerWidth;
window.addEventListener('resize', function () {
if (window.innerWidth !== width) {
window.location.reload(true);
}
});
})();


By this blog… We have learned how we can design a Typing animation.

Now I’m looking for your reviews.
So, How was the blog 😁, Learners!

If you want a more crisp blog like this then please check our Blogs sites CodewithRandom. keep tuned with us because every day you will learn something new here.😊

I hope that I’m able to make you understand this topic and that you have learned something new from this blog. If you faced any difficulty feel free to drop a comment down your problems and if you liked it, please show your love in the comment section. This fills bloggers’ hearts with enthusiasm for writing more new blogs.

You can follow me on Instagram 

Written by @Ankit kumar
 
The project and idea are from the YT channel name coming Nepal..
Share on:

Leave a Comment