I am looking for Text only Slideshow : web_design

By Prosyscom
In March 7, 2018
82 Views


Hi, First of all I am not a web designer and do not know anything about JS or bootstrap and have beginner level HTML/CSS skills. I am looking for a Text only HTML CSS Slideshow. I have this thing (see code below) but it does not slide automatically and there is also probably something wrong with this because it is messing up with the other things at my squarespace site.

As soon as I remove it, everything works fine. I would be really thankful if one of you can please please fix it.

<style>
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
.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;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
.text {
color: #454545;
font-size: 15px;
font-family: ‘Libre Franklin’;font-size: 21px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}

.dots {
z-index: 3;
position: relative;
top: 70px;
}

/* 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}
}
</style>

<div class=”slideshow-container”>
<div class=”mySlides fade”>
<img src=”https://i.imgur.com/h9pxwXi.jpg” style=”width:100%”>
<div class=”text”>“What I love about the technology is that it gives everybody an equal voice. Everyone has an opportunity to put their ideas on the table—it’s not the loudest person that dominates the conversation and strategic direction. It compiles information in a quick way that allows people to understand where everyone is which helps reach a consensus.”<br><br>

    — Kenneth J. Fredeen<br>
    General Counsel, Deloitte
    </div>
</div>


<div class="mySlides fade">
    <img src="https://i.imgur.com/h9pxwXi.jpg" style="width:100%">
    <div class="text">“Smart anonymity and proven neuroscience findings make it very effective at reducing common cognitive biases that plague most risk assessments. It also enables me to bring more of the right people into the decision-making process which increases the diversity of perspectives represented. As a result, when my clients use Powernoodle, they achieve more fulsome and robust risk assessments”<br><br>

— Diana Del Bel Belluz<br>
CEO, Risk Wise
</div>
</div>

<div class="mySlides fade">
    <img src="https://i.imgur.com/h9pxwXi.jpg" style="width:100%">
    <div class="text">“The Omniwomen Global Advisory Council leveraged the Powernoodle approach in our global decision making and collectively we have found it to be an outstanding experience.The approach got us to alignment faster, optimized the way we worked for a global environment and ignited outstanding engagement and results. I believe the approach can be instrumental in driving quality, efficiency, engagement and agility in decision-making not only for the OGAC but across our portfolio of agencies.”<br><br>

— Janet Riccio<br>
Executive Vice President, Omnicom Group
</div>
</div>

<div class="mySlides fade">
    <img src="https://i.imgur.com/h9pxwXi.jpg" style="width:100%">
    <div class="text">“I cannot think of single client from every sector around the globe who I’ve advised over four decades who would not benefit immensely from Powernoodle’s truly extraordinary strength in engaging your stakeholders from every corner of the world to solve your complex problems.”<br><br>

— Nadine Hack<br>
CEO, beCause Global Consulting
</div>
</div>
</div>

<a class=”prev” onclick=”plusSlides(-1)”>❮</a>
<a class=”next” onclick=”plusSlides(1)”>❯</a>

<div class=”dots” 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>
<span class=”dot” onclick=”currentSlide(4)”></span>
</div>

<script>
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”;
}
</script>

قالب وردپرس