9

In my website [based on wordpress] , I have a project slider (technically image with some text) . But that slider is not auto scrolling , there is a button for sliding left and right .

http://i47.tinypic.com/97uxz4.jpg

I want to remove that button and make it sliding auto . I don't want use any javascript . I want to accomplish with CSS . Is it possible if yes then how ?

If it is not possible what is the shortest possible solution to do this , Here is my working site

http://aniyanetworks.net/Blog

Shuvro Shuvro
  • 119
  • 1
  • 3
  • 10

3 Answers3

14

1.) You can't initiate DOM actions with CSS or pure HTML. You always need a manipulating language (like JavaScript)

2.) You can remove the buttons by overwriting the current CSS and adjust the visibility or display tag to render them away or (placeholding) invisible.

In the end you really need JavaScript for this to trigger dynamic hiding and to make the automatic slide happen with setIntervals.

Edit:

This might be something for you to work with animating the slider:

#container {
  height: 200px;
  width: 800px;
  border: 1px solid #333;
  overflow: hidden;
  margin: 25px auto;
}

#box {
  background: orange;
  height: 180px;
  width: 400px;
  margin: 10px -400px;
  -webkit-animation-name: move;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: right;
  -webkit-animation-timing-function: linear;
}

#box:hover {
  -webkit-animation-play-state: paused;
}

@-webkit-keyframes move {
  0% {
    margin-left: -400px;
  }
  100% {
    margin-left: 800px;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>HTML</title>
  <link rel="stylesheet" href="main2.css" type="text/css" />
</head>

<body>
  <div id="container">
    <div id="box">as</div>
  </div>
</body>

</html>

Result

This is the WebKit-only version. These are the equivalents for other browsers:

The @ keyframes:

@-moz-keyframes move {
@-o-keyframes move {
@keyframes move {

Inside #box (only one property shown as example):

-moz-animation-name: move;
-o-animation-name: move;
animation-name: move;
Manas Khandelwal
  • 3,790
  • 2
  • 11
  • 24
2

Here is an example (Fiddle) of using animations. You could apply this to your .post-list:

.post-list {
    animation: slide infinite 3s alternate;
}

@keyframes slide {
  0% {
    margin-left: 0px;
  }
  50% {
    margin-left: -100px;
  }
  100% {
    margin-left: -200px;
  }
}

To disable the animation on hover, use:

.post-list:hover {
    animation-play-state: paused;
}

Don't forget the vendor prefixes (-webkit-... and so on) like in Allendars answer.

But of course you'll have to play around. This should just be a hint of how it could work.

Linus Caldwell
  • 10,908
  • 12
  • 46
  • 58
  • That's css3 `animations`. I already postet a link where you can get information in the first comment to your question. – Linus Caldwell Mar 18 '13 at 20:29
  • Your Fiddle is incomplete Linus, please update it to show the reference to the animation at least. For more details please check my answer, it's a working version. –  Mar 18 '13 at 20:30
  • @Allendar, You meant the code in may answer, right? My fiddle was working already. – Linus Caldwell Mar 18 '13 at 20:43
  • Neutral `animation` doesn't seem to work in Safari. I think I misjudged based on that fact. Code seems to work with the extra pseudo styling :) –  Mar 18 '13 at 20:51
2

Here is an example for auto scroll in both limited and unlimited element width:

/*use this js if your element width is unlimited an you want to scroll in a 
constant speed. else, you dont need this js code*/
var elemWidth = document.getElementById('scroll-element').offsetWidth;
var time = elemWidth/80; /* 80 = scrolling speed (44px/s)*/
document.getElementById('scroll-element').style.cssText = "animation: scroll "+time+"s linear infinite;"
.scroll-box{
    white-space: nowrap;
    font-size: 1.1em;
    overflow: hidden;
    padding: 20px 0;
    background-color: green;
}
.scroll-container{
  width: fit-content;
  direction: rtl; /*if you want to scroll left to right set dir to ltr */
}
#scroll-element{
  background-color: yellow;
  padding: 10px;
}

@-webkit-keyframes scroll{
  0% {
    margin-right: 0%; /*if you want to scroll left to right set margin-left*/
    
  }
  100%{
    margin-right: 100%;/*if you want to scroll left to right set margin-left*/
  }
}
<!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="utf-8">
     <title>HTML</title>
     <link rel="stylesheet" href="main2.css" type="text/css" />
    </head>
    <body>
      <div class="scroll-box">
       <div class="scroll-container">
        <span id="scroll-element">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
        </span>
       </div>
      </div>
    </body>
    </html>
A H
  • 21
  • 3