I need to create a view that can be slided based on the anchor link clicked.
Here is the sample image on how it is supposed to look.
When clicked on appropriate link it is slided left and displays the specific text associated with it.
It also has back button to take back to the previous view.
Here is the sample fiddle to play with - https://jsfiddle.net/0agfjh5t/5/
<div class="slider-view">
<div class="first-slide">
FIRST VIEW
SECOND VIEW
THIRD VIEW
</div>
<div class="second-slide">
<div id="first">
This should be displayed slided to view when 'FIRST VIEW' anchor is linked
</div>
<div id="second">
This should be displayed slided to view when 'SECOND VIEW' anchor is linked
</div>
<div id="third">
This should be displayed slided to view when 'THIRD VIEW' anchor is linked
</div>
</div>
<a>Go back to FIRST SLIDE</a>
</div>
this is not exact solution which you want but it should give you the idea regarding how you can achive a Slideshow / Carousel effect using vanilla JS and CSS. here is a fiddle as well
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
.slider-view {
.first-slide {
background: lightgrey;
a {
display: block;
color: green;
font-weight: bold;
}
}
.second-slide {
> div {
display: none;
}
}
}
* { box-sizing: border-box; }
body { font-family: Verdana, sans-serif; margin: 0 }
.mySlides { display: none; }
img { vertical-align: middle; }
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
<div class="slider-view">
<div class="first-slide">
<- Back
<span class='dot'></span>FIRST VIEW
<span class='dot'></span>SECOND VIEW
<span class='dot'></span>THIRD VIEW
</div>
<div class="second-slide slideshow-container">
<div id="first" class="mySlides fade">
This should be displayed 'FIRST VIEW' anchor is linked
</div>
<div id="second" class=" mySlides fade">
This should be displayed 'SECOND VIEW' anchor is linked
</div>
<div id="third" class=" mySlides fade">
This should be displayed 'THIRD VIEW' anchor is linked
</div>
</div>
</div>
Related
I have a simple code that is changing on click slides.
I'm trying to make animation on an element with class "content" which may look like this animation.
I tried it in this code where it does not look good.
Is there any option for how to make animation on an element with class "content" like is in link which I sent above?
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].classList.remove("active");
}
for (i = 0; i < dots.length; i++) {
dots[i].classList.remove("active");
}
slides[slideIndex - 1].classList.add("active");
dots[slideIndex - 1].classList.add("active");
}
* {
box-sizing: border-box;
}
body {
font-family: Verdana, sans-serif;
margin: 0;
}
/* Slideshow container */
.slideshow-container {
height: 200px;
position: relative;
background: #f1f1f1f1;
}
/* Slides */
.mySlides {
width: 100%;
position: absolute;
padding: 80px;
text-align: center;
visibility: hidden;
transition: all 0s linear;
}
.mySlides .content {
transition: all 0.2s;
transform: translateX(-50px);
}
.mySlides.active {
visibility: visible;
}
.mySlides.active .content {
transform: translateX(0px);
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -30px;
padding: 16px;
color: #888;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
position: absolute;
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
color: white;
}
/* The dot/bullet/indicator container */
.dot-container {
text-align: center;
padding: 20px;
background: #ddd;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
/* Add a background color to the active dot/circle */
.dot.active,
.dot:hover {
background-color: #717171;
}
/* Add an italic font style to all quotes */
q {
font-style: italic;
}
/* Add a blue color to the author */
.author {
color: cornflowerblue;
}
<div class="slideshow-container">
<div class="mySlides">
<div class="content">
<q>I have not failed. I've just found 10,000 ways that won't work.</q>
<p class=" author ">- Thomas A. Edison</p>
</div>
</div>
<div class="mySlides">
<div class="content">
<q>But man is not made for defeat. A man can be destroyed but not defeated.</q>
<p class=" author ">- Thomas A. Edison</p>
</div>
</div>
<div class="mySlides">
<div class="content">
<q>I have not failed. I've just found 10,000 ways that won't work.</q>
<p class=" author ">- Thomas A. Edison</p>
</div>
</div>
<a class="prev " onclick="plusSlides(-1) ">❮</a>
<a class="next " onclick="plusSlides(1) ">❯</a>
</div>
<div class="dot-container ">
<span class="dot " onclick="currentSlide(1) "></span>
<span class="dot " onclick="currentSlide(2) "></span>
<span class="dot " onclick="currentSlide(3) "></span>
</div>
My simple code makes the slider clickable and on click will change slides. Now there is animation between slides a little bit broken. The only element with class "content" is animated.
This animation now overlaps elements with class "content" and then slide only from left to right.
Is there any option for how to make animation on elements with class "content" like when it is sliding the current "content" will go a little bit left and new "content" will goes left too but at the same time?
Something like this animation I need to achieve.
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].classList.remove("active");
}
for (i = 0; i < dots.length; i++) {
dots[i].classList.remove("active");
}
slides[slideIndex - 1].classList.add("active");
dots[slideIndex - 1].classList.add("active");
}
* {
box-sizing: border-box;
}
body {
font-family: Verdana, sans-serif;
margin: 0;
}
/* Slideshow container */
.slideshow-container {
height: 200px;
position: relative;
background: #f1f1f1f1;
}
/* Slides */
.mySlides {
width: 100%;
position: absolute;
padding: 80px;
text-align: center;
visibility: hidden;
transition: all 0s linear;
}
.mySlides .content {
transition: all 0.2s;
transform: translateX(-50px);
}
.mySlides.active {
visibility: visible;
}
.mySlides.active .content {
transform: translateX(0px);
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -30px;
padding: 16px;
color: #888;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
position: absolute;
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
color: white;
}
/* The dot/bullet/indicator container */
.dot-container {
text-align: center;
padding: 20px;
background: #ddd;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
/* Add a background color to the active dot/circle */
.dot.active,
.dot:hover {
background-color: #717171;
}
/* Add an italic font style to all quotes */
q {
font-style: italic;
}
/* Add a blue color to the author */
.author {
color: cornflowerblue;
}
<div class="slideshow-container">
<div class="mySlides">
<div class="content">
<q>I have not failed. I've just found 10,000 ways that won't work.</q>
<p class=" author ">- Thomas A. Edison</p>
</div>
</div>
<div class="mySlides">
<div class="content">
<q>But man is not made for defeat. A man can be destroyed but not defeated.</q>
<p class=" author ">- Thomas A. Edison</p>
</div>
</div>
<div class="mySlides">
<div class="content">
<q>I have not failed. I've just found 10,000 ways that won't work.</q>
<p class=" author ">- Thomas A. Edison</p>
</div>
</div>
<a class="prev " onclick="plusSlides(-1) ">❮</a>
<a class="next " onclick="plusSlides(1) ">❯</a>
</div>
<div class="dot-container ">
<span class="dot " onclick="currentSlide(1) "></span>
<span class="dot " onclick="currentSlide(2) "></span>
<span class="dot " onclick="currentSlide(3) "></span>
</div>
I have created image slide show. The code is below
HTML
<div class="slideshow-container">
<div class="mySlides fade">
<img src="https://i.pinimg.com/originals/bf/5f/95/bf5f9539ea9fa3eee60e961b7e50c8e1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://www.holifestival.org/images/holi-image-4-big.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="https://searchengineland.com/figz/wp-content/seloads/2016/03/google-photos-images-camera-ss-1920-800x450.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
CSS
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
JavaScript
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
It workes as per my need but when it comes to previous button and next buttons clicked it is not moving to as per previous slide or next slide.
Live Demo:https://codepen.io/RamBM/pen/ppdRGo
Could any one please let me know or rectify me where I'm going wrong.
The main issue here is that you started renaming things but did not rename them all (plusDivs/plusSlides, showDivs/showSlides).
Also, slideIndex is declared twice, you should remove the second one.
You might want to clear your timeout when manually navigating, too.
Add a var timeout at the beginning, change your setTimeout to timeout = setTimeout, and then update plusSlides:
function plusSlides(n) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
showSlides(slideIndex += n);
}
Edit: example corrected codepen https://codepen.io/kLabz/pen/BJmWab?editors=1010
I am having an issue with CSS slideshow I've implemented into my current passion-project, in which there is no default image being displayed upon load of the web-page. Upon navigation/dot press, images are successfully displayed, but I can't seem to figure out the small code snippet (presumably missing from the Javascript function) that would display the first image on page load. I've attempted to simply add the "active" class to the desired image, but this only makes the 'dot' button appear active with no corresponding image being displayed. Appreciate any assistance
Here's the code:
var slideIndex = 1;
function plusSlides(n) {
'use strict';
showSlides(slideIndex += n);
}
function currentSlide(n) {
'use strict';
showSlides(slideIndex = n);
}
function showSlides(n) {
'use strict';
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
.mySlides {
display: none
}
/* Slideshow container */
.slideshow-container {
max-width: 400px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add see-through background */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* */
.transition {
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
/* */
.active,
.transition:hover {
background-color: #222;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
/* */
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* */
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}
<div class="homePage">
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 2</div>
<img src="graphics/logo.jpg" style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 2</div>
<img src="graphics/1.jpg" style="width:100%">
<div class="text"></div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="transition" onclick="currentSlide(1)"></span>
<span class="transition" onclick="currentSlide(2)"></span>
<br>
</div>
You can give another class to the first image in the slider
<div class="mySlides fade block ">
<div class="numbertext">1 / 2</div>
<img src="#" style="width:100%">
<div class="text"></div>
</div>
Then you give it a display:block
.block {
display:block;
}
Example : https://jsfiddle.net/1ueun1L1/2/
I have the following slider, but when i load the page it does not show the first image. I have to click the button to load the image. How can I do it to show the first image by default? Here is my javascript:
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
Here is my html:
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="view8.png" style="width:100%">
<div class="title">David Lee CEO of Hing Wa Lee Group</div>
<div class="text">David Lee has turned the Hing Wa Lee Group Into one of the largest luxury watch retailers in the US</div>
<!--------BUTTON-------->
<div id="hovers">
<a href="#" class="buttonslider">
<span class="contentbutslider"> Read More</span>
</a></div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="view9.png" style="width:100%">
<div class="title">One on One Business Lessons</div>
<div class="text">Gain Access To Weekly World Entrepreneurs and their stories to success.</div>
<!--------BUTTON-------->
<div id="hovers">
<a href="#" class="buttonslider">
<span class="contentbutslider"> Read More</span>
</a></div>
</div>
Here is my CSS:
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1600px;
height:438px;
position: relative;
margin: auto;
}
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 28px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption title and text */
.title {
color: #f2f2f2;
font-size: 58px;
padding: 18px 22px;
position: absolute;
bottom: 158px;
width: 100%;
text-align: center;
}
.text {
color: #f2f2f2;
font-size: 28px;
padding: 18px 22px;
position: absolute;
bottom: 78px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
Can you help me with that. Also, when I go from slide to slide it becomes faster and faster and I would like to keep the same speed?
Can anybody help? Thank you
Modified all the code, check it again please:
<script>
var slideIndex = 0;
function plusSlides(n) {
slideIndex += n;
showSlides();
}
function currentSlide(n) {
slideIndex = n;
showSlides();
}
function showSlides() {
var slides = document.getElementsByClassName("mySlides");
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 0}
slides[slideIndex].style.display = "block";
}
setTimeout(showSlides, 2000); // Change image every 2 seconds
</script>