Content Slider for Blogposts

Question

I'm looking for a content slider similar to "Latest Projects" slider in this theme(its two sections below the main slider). I'd like to implement one without any CMS system. I searched for a mass keywords but didn't find anything useful. I'd really appreciate if you can give me a keyword or something similar to look for.

The content slider has to show four items in the starting position - with those navigation sliders it needs to allow limitless items.

Thank you in advance for your help!

ElTrusto

Answer 1

Bootstrap has a slider (aka carousel) built into it. One advantage to using Bootstrap is that your website becomes responsive (handles all sizes of screens / devices).

Here is a demo of a Bootstrap slider.

Alternately, you can roll your own. Here are a couple of simple slider demos from jsFiddle:

$(function(){
	$('#slider li').hide().filter(':first').show();
	setInterval(slideshow, 3000);
});

function slideshow() {
	$('#slider li:first').fadeOut('slow').next().fadeIn('slow').end().appendTo('#slider');
}

#slider	{ 
    position:relative;
    margin:0;
    padding:0;
    list-style-type:none;
    width:650px;
    height:430px;
    border: 1px solid #008000;     
    overflow:hidden; 
}
#slider li { 
    position:absolute;        
}
#slider img {
    width:650px;
    height:430px;    
}
#slider p { 
    position:absolute;
    bottom:0;
    padding:20px;
    color:#ffffff;
    background-color: #008000;
    opacity: 0.6;
    margin:0;
    left:0;
    right:0; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="slider">
	<li>
		<a href="https://flic.kr/p/pq1UFA">
			<img src="https://c4.staticflickr.com/4/3867/15367978792_acd632254d_h.jpg" alt="Alter Apfelbaum"/>
		</a>
		<p>Alter Apfelbaum</p>
	</li>
	<li>
    	<a href="https://flic.kr/p/ppXtn4">
        	<img src="https://c3.staticflickr.com/3/2942/15367308281_cf8a164414_h.jpg" alt="Ruth St Flowers-191"/>
    	</a>
    	<p>Ruth St Flowers-191</p>
	</li>
	<li>
    	<a href="https://flic.kr/p/pq5a4k">
        	<img src="https://c4.staticflickr.com/4/3862/15368612485_251ef5de2f_h.jpg" alt="Canada Close In."/>
    	</a>
    	<p>Canada Close In.</p>
	</li>
</ul>

jsFiddle - Fade, repeating (same as above code snippet)

jsFiddle - Slide, on click

Bootstrap Tutorial (it's all about the grid - master the grid and you've mastered Bootstrap)

---

The important thing about sliders is to understand what a slider is: it's just a DIV container, that contains several other DIVs (each of these inner DIVs containing the photo, <h1> (or whatever), <p> tags with text, etc., and all lined up side-by-side in a long row).

Imagine a cardboard moving box sitting on the floor with holes cut in the left/right sides and a viewing port cut into the front. You have a train of shoe boxes being slid through from left to right, each one pausing at the viewing port. As each shoe box slides out of the moving box, it is zipped back to the end of the train, and so the process continues ad infinitum.

The key secret is that the cardboard moving box is styled position:relative;overflow:hidden; and each shoe box is styled float:left (which aligns them side by side, because the default for DIVs is to stack atop one another).

Each shoe box is its own diorama. Each shoe box is a container, and inside each one there can be an image, an h1, some side-by-side divs, a footer -- all that inside each shoebox (aka "container", aka div). Each shoebox is a div. DIVs can, and usually should, contain other divs. <section>, <nav>, <aside>, <footer> are all DIVs. Why the different names? For SEO.

The examples posted above should do the trick for you. You just need to change the contents/shape of each shoebox.

Here is a great article that explains tons of stuff about styling container divs (aka "shoeboxes").