Modifying the accordion slider

This demo page is a response to a request made, and it will show how to modify the accordion slider in order to contain only text elements. First of all, you can remove the default images and add your own container elements that will hold your own data:

    <li class="first">
	    <a href="../../zz_templates/index/" title="Continue reading..."></a>
	    <div class="text-box">
		<h2>Demo title</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
		Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
		in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
		sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
		Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
		in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
		sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	    </div>
    </li>

As you can see, I've wrapped my content inside a div with the class text-box. Also, notice that some of the previous elements from each slide are removed. Now, let's see how the accordion-style.css file was modified.

#accordion-slider li {
    cursor: pointer;
    display: block;
    overflow: hidden;
    background: #fff;
    border-left: 1px solid #757a7c !important;
    // this was added to force the slide width to 560 px so the text content won't wrap when the slide closes
    width: 560px !important;
    height: 350px !important;
}
// this new style is used to add some padding to our text-box
#accordion-slider li .text-box {
    width: 520px;
    padding: 20px 40px 20px 0;
}

Other modifications were made to change the color of the bottom Read more link and the background color of the same bottom section. The javascript slider initialization suffered minor modifications also, lowered the opacity of the bottom section to 0 and set the slideHasShadow to false.

function sliderInit() {
    $("#accordion-slider").accordionSlider({
	sliderFullWidth: 960,
	slideWidth: 560,
	slideHeight: 350,
	selSlide: 0,
	animSpeed: 1500,
	onEvent: 'mouseover',
	descriptionOpacity: 0.4,
	descriptionAnimSpeed: 1400,
	blurUnselectedSlides: true,
	blockerOpacity: 0.0,
	markedOpacity: 1,
	elasticMode: true,
	slideHasShadow: true,
	markSelected: true,
	animType: 'easeOutExpo'
    });
}

For more in depth information you should also check out the following files: modified-accordion.html, accordion-style-demo.css and border-demo.js (the javascript file contains only minor modified initialization parameters) .

NOTE: These files are added only to demonstrate how one can change the accordion slider to contain other things rather than images.