In this article, how to display moving image right to left in HTML. In HTML it was so easily to move image on marquee tag. It is used to scrolling the images form 4 sides method right to left, left to right or vertical bottom to top, top to bottom .
Read also: How to create to display Image Foreground and Background
Syntax:
<marquee>
<img src="">
</marquee>
By default the marquee moves right to left or using to moves keywords behaviour and direction.
Examples:
<marquree behaviour="scroll" direction="left or right">
<img src=""/>
</marquee>
Display Moving Image Right to Left in HTML
<html>
<head>
<title>Dailyaspirants.com</title>
</head>
<body>
<marquee behavior="scroll" direction="right">
<img src="img/21.jpg" />
</marquee>
</body>
</html>
Using Slick Slider to Move Images:
Ok, Let's move on some interesting things in slider. Here are some beautiful files slick slider to show slider images in different ways.
For example, infinite scroll ,arrows next and back move images left to right and same time right to left in easiest way.
And Here the link slick slider
<style>
body{background-color:#363636;}
.homeslider{max-width:800px; margin:0 auto;}
.slide img{padding:10px;}
</style>
<html>
<head>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
</head>
<body>
<div class="homeslider">
<div class="slide">
<img src="img/1.jpg" />
</div>
<div class="slide">
<img src="img/41.jpg" />
</div>
<div class="slide">
<img src="img/21.jpg" />
</div>
<div class="slide">
<img src="img/41.jpg" />
</div>
</div>
<!---Js---->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.homeslider').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true
});
});
</script>
</body>
</html>
