Hi,
I would like to achive a slideshow like in the image attached. When we click on the text image inside the mobile screen needs to change. Can anyone help me?
1 Like
Let us see the code you have so far…
1 Like
This is just a mockup created in XD.
I just found a codepen repo which has almost same functionality but it doesn’t have a text on right side. https://codepen.io/gabmadrid/pen/YzZEbyb
Generally we like you to attempt to build it for yourself first and then we help with your learning process when you get stuck. Otherwise we are just offering work for free and no one learns 
If you are looking for a copy and paste approach then there are many examples on the web that are close to what you want. It’s basically a hide and show with js and some elementary html and css styling.
However, I will give you a start as I have an old codepen that is close to what you want and have amended it to hide and show the image.
You will need to add your outline phone image as the background to that div where I have just used rounded corners and a border and you will need to preserve that space so the inner image doesn’t cover it. (Or you could position your phone image on top absolutely using a higher z-index as long as the inner portions of your image are transparent. Or just use rounded corners and a border as in my example.)
The basis is that you use js to add or remove a class to the required element in order to show it. The data-destination attribute on the button points to an element with that ID to identify it.
<button data-destination="myItem1" ...etc
...
<li class="content show" id="myItem1">
The data-destination in each button should match a unique id on the item you want to show. If you follow that format you can add as many images as you need as long as you increment the data attributes to match the new ids.
2 Likes
Thank you very much for your advice. I mean it! 
With the provided demo I’ve done some modifications like the appearence of text on right side, device image and some small animations. But images are not showing while clicking on links, its hiding of the the phone.
Hi,
You can’t have an image as a direct child of a list. Only list elements can be direct children.
You probably want that phone image as a background anyway so i would pout it on the :before element.
e.g. Roughly like this.
I’m in a rush at the moment but back tomorrow as the animation you added is showing outside the box while animated and that needs to be resolved.
1 Like
Had a few seconds spare so came up with this
2 Likes
This is great man. Thanks for your huge support.
I’ve added animation to the images and now trying to add another functionality. A text on right of the last button, this text will change on every button clicks. Hope I will fully achieve that.
I’m not quite sure what you mean but perhaps you can work from this.
You say the text on the right will change on each mouse click but where are you getting the text from and is it related to each image?
If so there are a couple of ways this could be achieved.
You could supply the text you want displayed in a data attribute on each image and then grab the data from that data attribute and display it in the message div. Or you could store the text in a js array but then that isn’t very scalable as you would have to keep changing the js.
Looking at the picture you would also need to make sure the text on the left is only half the width of that space or it will sit on top of the message.
Lastly you show the extra text at the right of the third item but what happens if there are more than 3 items? Where is the text supposed to sit then? If the new text is basically description text for each image then maybe it would be better off centred in the space available.
The main question to ask is does the new text relate to each individual image? If so then it will be better as a data attribute stored in the image tag itself.
e.g.
<img src="img.jpg" data-caption="This is a pretty picture of something or other etc. etc. ..." alt="Sea scape">
I went with the data caption approach so you can see what I meant.
Note that small screen layout needs a lot of thought as obviously we can’t fit all that on a small screen so you need to think of how you are going to display this to small screen users.
1 Like
Wow, this is nice.
I’ve tweaked it for small screens.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.