Issue in carousel implementation with CSS3

[shenoyvnm]

want to implement carousel on my web page.I have created a plunker page for the same. In that link, i have used CSS3 transformations to create circle effects.

See index.html page) [http://plnkr.co/edit/PxTtJ2expidIamWUqXLj?p=preview&s=carousel][1]
In the above link i have removed the code which i had for carousel implementation because it was not working.Actually what happens is that most of the jquery caosuel available like(elastslide,liquidcarosel,flexslider) etc work only if the img(which needs to be slided) is directly under “li” tag.But in my case, i can’t keep img directly under “li” because of the css3 transformations i need.( for eg

<li>
 <div class="ch-item">   
 <div class="ch-info ch-info1" >                            
 </div>
 <div class="ch-thumb ch-img-1">
 <p class="text"> Java7</p>
 </div>
 </div>
 </li>

Could anyone please suggest how can i implement it.

[PaulOB]

A lot of sliders will slide any content so I’m not sure what the issue is. This one for example will slide blocks of content quite easily no matter what they contain.

jQuery Content Slider | Responsive jQuery Slider | bxSlider

If you meant something else then it would be better if we saw the broken version and not a version where you have removed the code you want us to debug

[shenoyvnm]

sure…i am not expecting you to debug ,but what i basically meant was that if my approach was correct in the first place. Anyway, will try with the link you shared and then put the code again for your reference

[PaulOB]

@shenoyvnm

but what i basically meant was that if my approach was correct in the first place

Ah Ok, Well it does depend on the slider you are using as they all have peculiarities.

@shenoyvnm

Anyway, will try with the link you shared and then put the code again for your reference

Ok, see how you get on and if you need help just shout.

[shenoyvnm]

Thanks Paul.Actually, as you said, “bxslider” is quite simple to implement and does work . Am still working on some CSS issues though.
[/quote]

Ok, see how you get on and if you need help just shout.
[/quote]

will definitely shout when i need help

[shenoyvnm]

i need help with some styling in the carousel i implemented.

please find the linkcarousel

I am facing issues on the two images(hyperlinks). If you hover over them (left or right) image, it shakes a bit. “Left image” on hover, moves a little up, while the “rt image”, on hover moves left.Also, other issue is that when i hover over the right image,it moves left(as i said earlier) and also overlaps with other div(i.e half image is getting displayed on hover). Please suggest how can i fix it

[RyanReese]

The “left image” on hover is only having the background image shift (not the element itself)

On “.bx-wrapper .bx-prev:hover” that’s changing the background-position of hte image. I don’t know why that has a different value set. You can remove that…?

Same with the right arrow; this rule → “.bx-wrapper .bx-next:hover” changes the background position. Again, you can remove this (unless you need it for something…?)

[shenoyvnm]

@RyanReese

.bx-wrapper .bx-prev:hover

Thanks Ryan. I removed the above styling and it fixed the issue.