Develop Reference

How to convert a HTML CSS image slider into Angular image slider?

I am trying to implement a image slider in angular from scratch, and trying to replicate a w3school based image slider.
Below I have tried to implement in angular, Can anyone guide me how to implement using angular?
Here you can find stackblitz link
component.html
<div class="slideshow-container" #myDiv>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://img.adaptivereso.com/https://stellarmls-propertyresi.s3.us-west-002.backblazeb2.com/314a10f7-07d4-4d9e-b8ea-be44be55ab35.jpeg/?rwidth=300&rheight=200&type=jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade" >
<div class="numbertext">2 / 3</div>
<img src="https://img.adaptivereso.com/https://stellarmls-propertyresi.s3.us-west-002.backblazeb2.com/cd7c5e85-d528-4d10-a635-ace77aaef77d.jpeg/?rwidth=300&rheight=200&type=jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://img.adaptivereso.com/https://stellarmls-propertyresi.s3.us-west-002.backblazeb2.com/314a10f7-07d4-4d9e-b8ea-be44be55ab35.jpeg/?rwidth=300&rheight=200&type=jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="prev" (click)="plusSlides(-1)">❮</a>
<a class="next" (click)="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" (click)="currentSlide(1)"></span>
<span class="dot" (click)="currentSlide(2)"></span>
<span class="dot" (click)="currentSlide(3)"></span>
</div>
component.ts
import { Component, OnInit, ViewChild, ElementRef, ViewChildren, QueryList } from '#angular/core';
#Component({
selector: 'app-custom-gallery',
templateUrl: './custom-gallery.component.html',
styleUrls: ['./custom-gallery.component.css']
})
export class CustomGalleryComponent implements OnInit {
slideIndex:number = 1;
constructor (public elementRef: ElementRef) { }
ngOnInit(): void {
this.showSlides(this.slideIndex);
}
plusSlides(n) {
this.showSlides(this.slideIndex += n);
}
currentSlide(n) {
console.log(n)
this.showSlides(this.slideIndex = n);
}
showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {this.slideIndex = 1}
if (n < 1) {this.slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
console.log(typeof slides[i]);
// slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
// slides[this.slideIndex-1].style.display = "block";
dots[this.slideIndex-1].className += " active";
}
}
component.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;
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}
}

Here is an approach you could use:
Create an ImageSlider component, which takes a list of images as in an input, and keeps track of the current slide
export class ImageSliderComponent {
#Input() images: string[];
slideIndex: number = 0;
changeSlide(n: number) {
this.slideIndex += n;
}
}
In the template, display only the active slide (refer to the img src binding):
<div class="slideshow-container" #myDiv>
<div class="mySlides fade">
<div class="numbertext">{{ slideIndex + 1}} / {{ images.length }}</div>
<img
[src]="images[slideIndex]"
style="width:100%"
/>
<div class="text">Caption Text</div>
</div>
<a class="prev" (click)="changeSlide(-1)">❮</a>
<a class="next" (click)="changeSlide(1)">❯</a>
</div>
Use your component like:
<app-image-slider [images]="[
'http://images.com/image1.jpg',
'http://images.com/image1.jpg',
'http://images.com/image3.jpg']"></app-image-slider>
Stackblitz: https://stackblitz.com/edit/angular-ivy-x9nk16?file=src%2Fapp%2Fimage-slider.component.ts
Note:
avoid use of ElementRef, getElementsByClassName, etc in Angular applications, this is usually an indication you are not using Angular conventions.

Padding in mobile view in css using div

I'm creating a simple html page with some text and css, on the top I have a few imagens with slideshow and on the body I put a big text, but I'm learning html and css.
The Question:
I used padding for the text but when is mobile the padding is not good for reading, if someone can help me just take a look at the codes, I used w3schools as a reference to create the page:
<!DOCTYPE html>
<html>
<head>
<style>
div .padding {
padding: 90px;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* 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 {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
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) {
.text {font-size: 11px}
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://cdn.dooca.store/568/files/2img.jpg?v=1617815220" style="width:100%">
<div class="text">Óleos Ozonizados</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://cdn.dooca.store/568/files/1img.jpg?v=1617815212" style="width:100%">
<div class="text">Óleo de Girassol</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://cdn.dooca.store/568/files/3img.jpg?v=1617818739" style="width:100%">
<div class="text">Óleo de Oliva</div>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
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
}
</script>
<div class="padding">
<p><strong>O que são os óleos ozonizados?</strong></p>
<p style="text-align: justify;">Os óleos ozonizados são produzidos basicamente a partir de 2 ingredientes, o óleo vegetal e o gás ozônio. A incorporação da molécula de ozônio ao óleo vegetal resulta de uma reação química, onde o ozônio reage com as ligações duplas de carbono presente nas cadeias lipídicas. Essa reação produz uma série de novas moléculas como ozonídeos e peróxidos que são responsáveis pela ação antimicrobiana e bioestimuladora dos óleos ozonizados. </p> </div>
</body>
</html>

Just edit this:
div .padding {
padding: 90px;
}
to
.padding {
padding: 90px;
}
You should also only use one <style> tag.
Also would like to advice to check out Media Queries where you can control the styling base on Responsive:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Carousel disappears using custom HTML on Joomla

My Carousel images are disappearing on Joomla. I'm trying to have an automatic banner for a webpage using the below code from W3 Schools, I have entered the code into a custom module in Joomla. I have also tried using it with Notepad++ and opening it in a browser and it works completely fine. However, on the Joomla page the images become white and do not display. I am able to switch between them an the CSS for the slider and arrows seems to work. Please find my code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* 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 {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
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) {
.text {font-size: 11px}
}
</style>
</head>
<body>
<h2>Automatic Slideshow</h2>
<p>Change image every 2 seconds:</p>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg"
style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://www.w3schools.com/howto/img_fjords_wide.jpg"
style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img
src="https://www.w3schools.com/howto/img_mountains_wide.jpg"
style="width:100%">
<div class="text">Caption Three</div>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
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, 6000); // Change image every 6 seconds
}
</script>
</body>
</html>

If you are using Custom HTML Module - it disables all of your scripts
I advice you to use something else for using JS in module - for example - Flexi Custom Code

The code you have shown is for an entire html document, you can't simply dump that whole into another entire html document. Joomla is a CMS, you shouldn't just drop html into it. To add an image carousel it would be better to create your own module to do that.

how can i remove my slideshow width? and how can i add more number of picture in my slideshow

how can i remove my slideshow width? and how can i add more number of picture in my slideshow
i want to increase my slideshow width, and increase number of picture of myslideshow, slideshow is writtern in java, css and html.
my pics size is 1200x300.
i tried to add width in css but width increased just right side, my pic does not fit in center please help me experts.
Help Help Help
Help Help Help
Help Help Help
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
}
.mySlides {
display: none
}
/* Slideshow container */
.slideshow-container {
max-width: 1200px;
position: relative;
margin: auto;
}
/* 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;
}
.active {
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) {
.text {
font-size: 11px
}
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://4.bp.blogspot.com/-LMLb-SRggk8/WdfQDgzmHYI/AAAAAAAAByc/UWQgh2DqSdAY5esr3-i5qmRYDFVuTh7zACLcBGAs/s1600/Flag%2B1200x300.jpg" style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://3.bp.blogspot.com/-lbgXjiKwfss/WdfQufxdrsI/AAAAAAAAByk/A8oJ9b3nMugIs6LIgjv04qCHAfrO-NXrACLcBGAs/s1600/Animation%2BLight%2BHouse.gif" style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://1.bp.blogspot.com/-6RWJYpjHqFE/WdfQ8S9RWrI/AAAAAAAAByo/OflSPE6aAKQpvWjfNUS3-lrddygVFaL6QCLcBGAs/s1600/outer%2Bspace%2Bnight%2Bstars.jpg" style="width:100%">
<div class="text"></div>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
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
}
</script>
</body>
</html>

Simply remove the margin in the body and add the min-width: 100%; to the .slideshow-container.
For adding more slide just duplicate this code.
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="my-image.jpg"> <!-- remove the width property from all image tag. -->
<div class="text"></div>
</div>
There is no magical width property that will set the image width to 100% you need to set the width of the container of the image and the image will expand accordingly.
Also, increase the number of <span class="dot"></span> element as you increase the slides. Because it depends on the number of slides else it will stop the js code and throw an error.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
margin: 0px;
}
.widget {
margin: 0px;
}
.mySlides {
display: none
}
/* Slideshow container */
.slideshow-container {
min-width: 100%;
position: relative;
margin: auto;
}
/* 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;
}
.active {
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) {
.text {
font-size: 11px
}
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://4.bp.blogspot.com/-LMLb-SRggk8/WdfQDgzmHYI/AAAAAAAAByc/UWQgh2DqSdAY5esr3-i5qmRYDFVuTh7zACLcBGAs/s1600/Flag%2B1200x300.jpg" style="width: 100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://3.bp.blogspot.com/-lbgXjiKwfss/WdfQufxdrsI/AAAAAAAAByk/A8oJ9b3nMugIs6LIgjv04qCHAfrO-NXrACLcBGAs/s1600/Animation%2BLight%2BHouse.gif" style="width: 100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://1.bp.blogspot.com/-6RWJYpjHqFE/WdfQ8S9RWrI/AAAAAAAAByo/OflSPE6aAKQpvWjfNUS3-lrddygVFaL6QCLcBGAs/s1600/outer%2Bspace%2Bnight%2Bstars.jpg" style="width: 100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="http://lorempixel.com/output/food-q-c-1200-300-3.jpg" style="width: 100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="http://lorempixel.com/output/animals-q-c-1200-300-5.jpg" style="width: 100%">
<div class="text"></div>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<!-- Increase the dots as you increase the slides -->
</div>
<script>
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
}
</script>
</body>
</html>

Is this what you want?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}
.mySlides {display:none}
/* Slideshow container */
.slideshow-container {
position: relative;
margin: auto;
}
/* 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;
}
.active {
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) {
.text {font-size: 11px}
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://4.bp.blogspot.com/-LMLb-SRggk8/WdfQDgzmHYI/AAAAAAAAByc/UWQgh2DqSdAY5esr3-i5qmRYDFVuTh7zACLcBGAs/s1600/Flag%2B1200x300.jpg" style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://3.bp.blogspot.com/-lbgXjiKwfss/WdfQufxdrsI/AAAAAAAAByk/A8oJ9b3nMugIs6LIgjv04qCHAfrO-NXrACLcBGAs/s1600/Animation%2BLight%2BHouse.gif" style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://1.bp.blogspot.com/-6RWJYpjHqFE/WdfQ8S9RWrI/AAAAAAAAByo/OflSPE6aAKQpvWjfNUS3-lrddygVFaL6QCLcBGAs/s1600/outer%2Bspace%2Bnight%2Bstars.jpg" style="width:100%">
<div class="text"></div>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
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
}
</script>
</body>
</html>

How to scroll images without using marquee tag? Javascript,jquery or css anything

<marquee>
<div class="client">
<img src="images/c1.png"/>
</div>
<div class="client">
<img src="images/c2.png"/>
</div>
<div class="client">
<img src="images/c3.png"/>
</div>
<div class="client">
<img src="images/c4.png"/>
</div>
<div class="client">
<img src="images/c5.png"/>
</div
><div class="client">
<img src="images/c6.png"/>
</div
><div class="client">
<img src="images/c7.png"/>
</div>
</marquee>
I wanted to scroll these images without using html's marquee tag...please help me.I have used css keyframes but I didn't get what I wanted. These images are in index page bottom side. This is clients logos scrolling from left to right or right to left....thanks in advance.

/*download .js file from here and include it in ur project */
http://technicalpixel.com/post%20sample%20code/Continous%20Horizontal%20JQuery%20Image%20Marquee/assets/js/crawler.js
<head>
<script src="assets/js/crawler.js" type="text/javascript" ></script>
</head>
/* add id to ur div tag */
<div id="marquee">
<div class="client">
<img src="images/c1.png"/>
</div>
<div class="client">
<img src="images/c2.png"/>
</div>
<div class="client">
<img src="images/c3.png"/>
</div>
<div class="client">
<img src="images/c4.png"/>
</div>
<div class="client">
<img src="images/c5.png"/>
</div
><div class="client">
<img src="images/c6.png"/>
</div
><div class="client">
<img src="images/c7.png"/>
</div>
</div>
/* Add this script in ur project in head tag*/
marqueeInit({
uniqueid: 'marquee',
style: {
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
savedirection: true,
random: true
});

Please try this:
<style type="text/css">
/* Make it a marquee */
.marquee {
width: 450px;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
animation: marquee 50s linear infinite;
}
.marquee:hover {
animation-play-state: paused
}
/* Make it move */
#keyframes marquee {
0% { text-indent: 27.5em }
100% { text-indent: -105em }
}
/* Make it pretty */
.microsoft {
padding-left: 1.5em;
position: relative;
font: 16px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
/* ::before was :before before ::before was ::before - kthx */
.microsoft:before, .microsoft::before {
z-index: 2;
content: '';
position: absolute;
top: -1em; left: -1em;
width: .5em; height: .5em;
box-shadow: 1.0em 1.25em 0 #F65314,
1.6em 1.25em 0 #7CBB00,
1.0em 1.85em 0 #00A1F1,
1.6em 1.85em 0 #FFBB00;
}
.microsoft:after, .microsoft::after {
z-index: 1;
content: '';
position: absolute;
top: 0; left: 0;
width: 2em; height: 2em;
background-image: linear-gradient(90deg, white 70%, rgba(255,255,255,0));
}
/* Style the links */
.vanity {
color: #333;
text-align: center;
font: .75em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
.vanity a, .microsoft a {
color: #1570A6;
transition: color .5s;
text-decoration: none;
}
.vanity a:hover, .microsoft a:hover {
color: #F65314;
}
/* Style toggle button */
.toggle {
display: block;
margin: 2em auto;
}
</style>
<p class="microsoft marquee"><img src="https://s-media-cache-ak0.pinimg.com/236x/a2/4b/48/a24b48e465e666fffd4cbcaa79107c7c.jpg" /></p>
<button class="toggle">Toggle Beautification</button>
<script type="application/javascript">
$(".toggle").on("click", function () {
$(".marquee").toggleClass("microsoft");
});
</script>
http://jsfiddle.net/jonathansampson/XxUXD/