We help IT Professionals succeed at work.

Rotate images for Web Page

152 Views
Last Modified: 2017-04-18
I have a web page that has two jquery menus..  A top menu and a accordion menu in their own grids.

I need to add a rotating image in another grid on that page.  The things I have tried work in chrome and firefox but not I.E. 11  OR don't work with the other two jquery menus in the page.

Can you recommend something simple that has step by step that would let me rotate some images in a grid on this page.

Thanks.
Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
By rotating images do you mean a carousel like this one https://owlcarousel2.github.io/OwlCarousel2/

Author

Commented:
It says this on the readme file OwlCarousel2 is currently being transferred to a new owner

Stay tuned while the new owner sorts through some stuff.

I want something that will work with I.E. 11 that is simple and just rotates several images without me or the user having to do anything.  Thanks.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
By rotate you mean changes one image for the other?
CSS
<style type="text/css">
.slideshow {
  position: relative;
  width: 1024px;
}
.slideshow img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
}
.slideshow img:nth-child(1) {
  position: relative;
  z-index: 10;
}
.slideshow img:nth-child(2) {
  z-index: 5;
}
.thumbs {
  width: 50px;
}
.thumbs img {
  width: 100%;
}
</style>

Open in new window

HTML
<div class="slideshow">
  <img src="images/background4.jpg" />
  <img src="images/background5.jpg" />
  <img src="images/background6.jpg" />
</div>

Open in new window

jQuery
var parent = $('.slideshow');
setInterval(function() {
  $('.slideshow img:first-child').fadeOut('slow', function() {
    $(this).appendTo($(this).parent()).show();
  });
}, 5000);
</script>

Open in new window

Working sample here
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
BTW OwlCarousel is one of the most popular carousel libraries out there - if the above example is not what you want then take a look at Owl it has a rich set of functionality.

Author

Commented:
Julian where do I put the jquery in the code?  Thank you.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
What Jscrip libararies do I need to reference in the header for this?

Author

Commented:
If I use one image it show correctly and I can see it replacing the one image.  If I add an image the exact same size and image just added the green over it see it change. It goes weird and one image is big covering the page.  the images are swapping back and forth but one is always large.

I attached the two images so you can see it.  the code is in a grid and if I only use the one image it's perfect and see it trying to swap but no other image.
image-with-2.docx
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
I would need to see how you have implemented this - as you can see from the sample the code works so there must be something specific in your implementation.

Author

Commented:
I am pretty sure it's one of the other two jscript menu's maybe the files they are using conflict. I do have this working on another page with just the one jscript top menu.  It's that side menu accordion that I think is impacting it.  Regardless thank you for the help and the other menu options you provided.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
You are welcome.
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.