Slideshow not working correctly in Karma theme
Permalink
I applied the custom template for the slideshow with Karma theme in order to fix a problem with cropping of images on mobile devices. The images are shown in correct size in iPad but only the first image is in the position where it should be. The rest of images are moving downward by one image height each time an image is displayed. By the time the last image is displayed, it is at the bottom of the page. This problem occurs to both mobile and desktop devices.
Any help will be greatly appreciated.
Any help will be greatly appreciated.
Do you have a link to see?
Paid themes come with free support so you should put in a support request to the developer.
I did post on its forum but no response. I will try posting on the support page. Thanks for the suggestion.
A post to Support goes directly to the developer. Posting to the forum does not guarantee the developer will see it.
While looking deep into it, the display: block css property on image wrapper makes this. I'm sure its not an issue of the theme. Rather you may check the custom template.
If you see the code, each div holds an inline style. And it has changed accordingly while fading the slides. At the first stage, the 1st div has style display: block and others display:none
But while the slide show going to the next steps, all of the divs set as display: block.
Rony
<div id="slideImgWrap0" class="slideImgWrap" style="opacity: 0; z-index: 1; display: block;"><img src="/eduteches/files/1213/7556/7380/usla.jpg" style="width: 100%;"></div> <div id="slideImgWrap1" class="slideImgWrap" style="opacity: 0; z-index: 1; display: block;"><img src="/eduteches/files/3313/7556/7377/hollywood.jpg" style="width: 100%;"></div> <div id="slideImgWrap2" class="slideImgWrap" style="opacity: 1; z-index: 2; display: block;"><img src="/eduteches/files/1013/7556/7322/alc.jpg" style="width: 100%;"></div> <div id="slideImgWrap3" class="slideImgWrap" style="display: block; opacity: 0; z-index: 1;"><img src="/eduteches/files/6613/7556/8211/lanight1.jpg" style="width: 100%;"></div>
If you see the code, each div holds an inline style. And it has changed accordingly while fading the slides. At the first stage, the 1st div has style display: block and others display:none
But while the slide show going to the next steps, all of the divs set as display: block.
Rony
Hi Rony,
Thanks for the post. How did you produce the code? I don't see it using view source (I see some JS which may produce the html code you posted). However, what I see in the code is that all the lines are the same except for the id, img src, and opacity on line 3 is different from the rest. On line 4, "display: block" is at the beginning of the inline style tag while the rest in the end. Will that make a difference?
The slide show displays images in correct position with the default template. But it is not responsive to mobile device. Karma developed a custom template to fix that problem. It does but not without new problem.
I am very new to concrete5. Any tips should be greatly appreciated.
Paul
Thanks for the post. How did you produce the code? I don't see it using view source (I see some JS which may produce the html code you posted). However, what I see in the code is that all the lines are the same except for the id, img src, and opacity on line 3 is different from the rest. On line 4, "display: block" is at the beginning of the inline style tag while the rest in the end. Will that make a difference?
The slide show displays images in correct position with the default template. But it is not responsive to mobile device. Karma developed a custom template to fix that problem. It does but not without new problem.
I am very new to concrete5. Any tips should be greatly appreciated.
Paul
Great to see that the problem is resolved. I was inspecting it with the browsers developer tool in Firefox.
Rony
Rony
The issued was resolved by using another slide add-on called "Whale Nivo Slider". Thanks for everyone's advice.
