CSS Carousel inside another image

Asked

Viewed 1,054 times

3

I need to make a carousel/slideshow of images only it happens inside another image. Example:

I have this picture of the notebook in png, the slideshow should take place inside his screen. However, controls like arrows and "polka dots" p/ indicate which image is being displayed should stay off the notebook.

notebook png

I’m pretty new at this, someone knows if there’s a way and can show me a way?

EDIT: Besides all my slides are in trouble.. follows example in js fiddle of what I have so far in jsfiddle https://jsfiddle.net/do9jLvk6/

html css
  • 1

    You can try applying the carousel normally, decrease the central container of the carousel if necessary, and play this image with transparent background in front of the carousel. So the carousel would be standard but with the image in front ...

  • I’ll try! for that I use that z-index property in my css?

  • That’s right, if you can post some easy-to-play code, so we can test it from the outside it will be very useful.

  • @Bruno edited the question with the code I did so far.. gave problem tb , but if you want to take a look

  • Is the size of the notebook image static? If it is, what would be the size?

1 answer

1


See working on Fiddle: https://jsfiddle.net/do9jLvk6/2/

What I did was create a div #notebook which will be the slider container and I put the notebook image as the background of this div.

Then I set the dimensions and positioned the slider div in the center, inside the notebook monitor.

I modified the positioning of the arrows and the "balls" to be outside.

Well, all this will depend a lot on the size you want the notebook image. If you want to increase or decrease, just make the appropriate adjustments.

  • Very nice, thank you! There is only one problem, when I open in the browser, the images appear on top of each other, only hide and show only what should be shown after the first click on one of the arrows or balls.. have any idea what it might be?

  • Change the line showSlides(slideIndex); for $(function(){showSlides(slideIndex);});

  • Can you explain to me the difference between these lines? Unfortunately it didn’t work... it’s still the same

  • The first line is executed before loading the page, the second after. The showSlides(slideIndex); should be called when all elements are loaded. Do the following, put the whole script at the end of HTML, before the </body tag>.

  • Got it! Now it worked! Thank you very much, it helped a lot

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.