Adding Sliders To Blog Posts?

Question

I have found a JsFiddle similar to what I'm talking about, click here to see it. I'm trying to add something similar to this on my site, but instead of the links that causes the posts to slide I would like an arrow. Another arrow would have to appear to back to the previous blog post if the arrow to go to the next post is clicked. I don't know where to start programming this. Does anyone know if I could just remove the links and turn them into arrows with just pure CSS?

Answer 1

Does anyone know if I could just remove the links and turn them into arrows with just pure CSS?

Yes you can.

Edit You can refer to this fiddle for two options on making arrows, Demo .

Here is how you make a css triangle,

a.btnL {
    border-right: 20px solid brown;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    height: 0;
    width: 0;
    display: inline-block; /* not needed but block is */
}

If you only want 2 triangles then you will need to rewrite your script due to how it is functioning.

Here is an updated fiddle: Demo

Answer 2

You could do something like this:

html:

<div class="post-container">
    <a href="#" class="arrow left"></a>
    <a href="#" class="arrow right"></a>
    <!-- Your post -->
</div>

css:

.post-container {
    position: relative;
}

.arrow {
    position: absolute;
    top: 10px;
}

.left {
    border-right: 20px solid blue;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    height: 0;
    left: -15px;
    width: 0;
}

.right {
    border-left: 20px solid blue;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    height: 0;
    right: 15px;
    width: 0;
}

And a working demo here: http://jsfiddle.net/kYH6S/1/