[Androni]

Hello, new here

This is a lot to ask, i'm new to CSS aswell as jquery but I've got a small problem. I'm currently playing with the Infinite Carousel 3 on how it will resize to the screensresolution i know this has nothing to do this the .js. I think i'm implementing this incorrectly. Sadly there are not much resources for this version since its quite new.

This is what i've got


But when the window is resized it looks like the following


I've been doing a lot of searching for developers doing this as well and http://www.jayhollywood.com.au/ seems to be the closest to what i'm trying to implement.

Heres what i have but i just can't figure it out. The padding is at 480px which is half the size of the image i wish to display.

       <section id="carousel-holder">
                <ul id="carousel">
                    <li><img src="Images/Slider/Image1.png" alt="Image1" width="960" height="317" /><div><p>Image1Test</p><a title="View Test 1" href="/Test1/">ViewImage1Test</a></div></li>
                    <li><img src="Images/Slider/Image2.png" alt="Image2" width="960" height="317" /><div><p>Image2Test</p><a title="View Test 2" href="/Test2/">ViewImage2Test</a></div></li>
                    <li><img src="Images/Slider/Image3.png" alt="Image3" width="960" height="317" /><div><p>Image3Test</p><a title="View Test 3" href="/Test3/">ViewImage3Test</a></div></li>
                    <li><img src="Images/Slider/Image4.png" alt="Image4" width="960" height="317" /><div><p>Image4Test</p><a title="View Test 4" href="/Test4/">ViewImage4Test</a></div></li>
                    <li><img src="Images/Slider/Image5.png" alt="Image5" width="960" height="317" /><div><p>Image5Test</p><a title="View Test 5" href="/Test5/">ViewImage5Test</a></div></li>
                </ul>
	</section>

#carousel-holder{
	margin:auto;
	overflow:hidden;
}

.ic_peek_padding {
	padding: 0 480px;
}

Thank you for any help

[sash_oo7]

Androni, on 16 January 2012 - 10:28 PM, said:

Hello, new here

This is a lot to ask, i'm new to CSS aswell as jquery but I've got a small problem. I'm currently playing with the Infinite Carousel 3 on how it will resize to the screensresolution i know this has nothing to do this the .js. I think i'm implementing this incorrectly. Sadly there are not much resources for this version since its quite new.

This is what i've got


But when the window is resized it looks like the following


I've been doing a lot of searching for developers doing this as well and http://www.jayhollywood.com.au/ seems to be the closest to what i'm trying to implement.

Heres what i have but i just can't figure it out. The padding is at 480px which is half the size of the image i wish to display.

       <section id="carousel-holder">
                <ul id="carousel">
                    <li><img src="Images/Slider/Image1.png" alt="Image1" width="960" height="317" /><div><p>Image1Test</p><a title="View Test 1" href="/Test1/">ViewImage1Test</a></div></li>
                    <li><img src="Images/Slider/Image2.png" alt="Image2" width="960" height="317" /><div><p>Image2Test</p><a title="View Test 2" href="/Test2/">ViewImage2Test</a></div></li>
                    <li><img src="Images/Slider/Image3.png" alt="Image3" width="960" height="317" /><div><p>Image3Test</p><a title="View Test 3" href="/Test3/">ViewImage3Test</a></div></li>
                    <li><img src="Images/Slider/Image4.png" alt="Image4" width="960" height="317" /><div><p>Image4Test</p><a title="View Test 4" href="/Test4/">ViewImage4Test</a></div></li>
                    <li><img src="Images/Slider/Image5.png" alt="Image5" width="960" height="317" /><div><p>Image5Test</p><a title="View Test 5" href="/Test5/">ViewImage5Test</a></div></li>
                </ul>
	</section>

#carousel-holder{
	margin:auto;
	overflow:hidden;
}

.ic_peek_padding {
	padding: 0 480px;
}

Thank you for any help

#carousel-holder {
	width: 754px;/*change according to ur need */
	margin: 9% auto 0 auto;/*change according to ur need */
	padding: 20px 0;/*change according to ur need */
}

This post has been edited by sash_oo7: 16 January 2012 - 10:45 PM

[Androni]

Sadly this won't work because of the inbuilt function for peeking the slides before and after the image. This is why i have to. As this allows me to choose the size of those slides that i wish to see.

.ic_peek_padding {
        padding: 0 480px;
}

[sash_oo7]

can u post the full code so that i can see exactly what u want including the size of slides?and nav position?

are u using this ?
see here

This post has been edited by sash_oo7: 18 January 2012 - 12:38 AM

[Androni]

I figured it out now, thanks anyway

[brightonmike]

Androni, on 18 January 2012 - 05:14 PM, said:

I figured it out now, thanks anyway

You should share your solutions so if somebody else has the same problem, we don't have to go through it all over again.