Geek Answers Handbook

How to get multiple scrollable images in HTML continuously

This is my entire HTML and CSS code.

This is css for scrolling images.

<style> * {margin: 0; padding: 0;} body { background-color: #666; } #container { width:70%; overflow: hidden; margin: 50px auto; background: white; } /*header*/ header { width: 800px; margin: 40px auto; } header h1 { text-align: center; font: 100 60px/1.5 Helvetica, Verdana, sans-serif; } header p { font: 100 15px/1.5 Helvetica, Verdana, sans-serif; text-align: justify; } /*photobanner*/ .photobanner { height: 233px; width: 3550px; margin-bottom: -45px; } /*keyframe animations*/ .first { -webkit-animation: bannermove 30s linear infinite; -moz-animation: bannermove 30s linear infinite; -ms-animation: bannermove 30s linear infinite; -o-animation: bannermove 30s linear infinite; animation: bannermove 30s linear infinite; } @keyframes "bannermove" { 0% { margin-left: 0px; } 100% { margin-left: -2125px; } } @-moz-keyframes bannermove { 0% { margin-left: 0px; } 100% { margin-left: -2125px; } } @-webkit-keyframes "bannermove" { 0% { margin-left: 0px; } 100% { margin-left: -2125px; } } @-ms-keyframes "bannermove" { 0% { margin-left: 0px; } 100% { margin-left: -2125px; } } @-o-keyframes "bannermove" { 0% { margin-left: 0px; } 100% { margin-left: -2125px; } } .photobanner img { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } .photobanner img:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); cursor: pointer; -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2); -moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2); box-shadow: 0px 3px 5px rgba(0,0,0,0.2); } </style> </head>

This is the HTML

  <body> <div id="container"> <a href="http://www.somelink.com"> <div class="photobanner"> <img class="first" src="images/Arjun_singh.jpg" alt="" /> <img src="images/dinesh.jpg" alt="" /> <img src="images/dr.neha.jpg" alt="" /> <img src="images/dr.pooja.jpg" alt="" /> <img src="images/dr.preeti.jpg" alt="" /> <img src="images/dr.rajesh.jpg" alt="" /> <img src="images/Arjun_singh.jpg" alt="" /> <img src="images/dinesh.jpg" alt="" /> <img src="images/dr.neha.jpg" alt="" /> <img src="images/dr.pooja.jpg" alt="" /> <img src="images/dr.preeti.jpg" alt="" /> <img src="images/dr.rajesh.jpg" alt="" /> <img src="images/dr.preeti.jpg" alt="" /> <img src="images/dr.rajesh.jpg" alt="" /> <img src="images/dr.preeti.jpg" alt="" /> <img src="images/dr.preeti.jpg" alt="" /> <img src="images/dr.rajesh.jpg" alt="" /> <img src="images/dr.preeti.jpg" alt="" /> <img src="images/dr.rajesh.jpg" alt="" /> </div> </a> </div> </body>

Can you send me a link if possible using javascript or jQuery

You can view this link for quick viewing ...

http://designshack.net/tutorialexamples/photobanner/index.html

+5
source share
1 answer

It could be the library you're probably looking for

http://logicbox.net/jquery/simplyscroll/

This library requires jQuery and is easy to use. Hope this helps you.

+4
source

More articles:


All Articles