CODEWITHSUNDEEP
jquerycss
Rick Donohoe
Rick Donohoe

Reputation: 7271

Creating a Horizontal scroller for content rather than images

I would like to know how to use CSS positioning and floats to achieve a content slider effect.

For example rather than having menu links to pages, I would like to disable the link behavior, and instead make the page content appear to slide horizontally (left or right) to give the effect of old content leaving the screen and new content appearing on the screen?

How is this effect achieved?

Is there also any SEO advantages or disadvantages to displaying content on one page like this as oppose to linking to numerous pages?

Thanks, Rick

EDIT: This question has been modified to appear less problem specific, and therefore of more use to the whole community.

Upvotes: 0

Views: 905

Answers (3)

Deadlykipper
Deadlykipper

Reputation: 878

Get jQuery. Get scrollTo. Read. Learn. Implement.

scrollTo demos: http://demos.flesler.com/jquery/scrollTo/

Quite a nice live example: http://www.charliegentle.co.uk/

Hope you can figure it out. If you struggle, add your code to http://jsfiddle.net/ and I'll see if I can find where you're going wrong.

Upvotes: 1

Sagar Patil
Sagar Patil

Reputation: 1948

Firstly, you should place your <h2> outside of the .sliders class.

You can add the following styles to the divs:

<div class='container'>

    <div class='sliders'>
        <div class='panel' id='home_slider'></div>
        <div class='panel' id='portfolio_slider'></div>
        <div class='panel' id='contact_slider'></div>
    </div>

</div>

Then your styles would be:

.container{
   width:960px;
   overflow:hidden;
   position:relative;
}

.sliders{
   float:left; 
   width:10000px;
   position:relative;
   left:0; top:0;
}

.panel{
   float:left;
   width:auto; /*You can define a width for this if required*/
   margin:20px;
}

You'll have to change the values above to meet your requirements, but the gist of it all is that the '.container' class acts as a layer, below which you have the '.sliders' class which contains all the '.panels' divs. By setting 'overflow:none' on the 'container', the visible '.sliders' width remains the same as the visible area of '.containers', no matter how big the '.sliders' div is. The width of the '.sliders' div will expand depending on the number of divs you have inside (if you set the width to auto) Then you only need to use some JQuery to animate the left position of the '.sliders' class.

Hope this helps.

Upvotes: 1

Brian
Brian

Reputation: 2229

Try using the jcarousel plugin for the sliding divs

http://sorgalla.com/projects/jcarousel

Upvotes: 1

Related Questions