The functionality of the Javascript 3D carousel is experiencing issues when used in Internet Explorer

I have a client who needs a 3D carousel on their website. I came across this one that functions perfectly in Chrome and FF: http://codepen.io/dudleystorey/pen/kiajB

HTML:

<div id=carousel>
<figure id=spinner>
<img src=//demosthenes.info/assets/images/wanaka-tree.jpg alt="">
<img src=//demosthenes.info/assets/images/still-lake.jpg alt="">
<img src=//demosthenes.info/assets/images/pink-milford-sound.jpg alt="">
<img src=//demosthenes.info/assets/images/paradise.jpg alt="">
<img src=//demosthenes.info/assets/images/morekai.jpg alt="">
<img src=//demosthenes.info/assets/images/milky-blue-lagoon.jpg alt="">
<img src=//demosthenes.info/assets/images/lake-tekapo.jpg alt="">
<img src=//demosthenes.info/assets/images/milford-sound.jpg alt="">
</figure>
</div>
<span style=float:left class=ss-icon onclick="galleryspin('-')">&lt;</span>
<span style=float:right class=ss-icon onclick="galleryspin('')">&gt;</span>

CSS:

div#carousel { 
  perspective: 1200px; 
  background: #100000; 
  padding-top: 10%; 
  font-size:0; 
  margin-bottom: 3rem; 
  overflow: hidden; 
}
figure#spinner { 
  transform-style: preserve-3d; 
  height: 300px; 
  transform-origin: 50% 50% -500px; 
  transition: 1s; 
} 
figure#spinner img { 
  width: 40%; max-width: 425px; 
  position: absolute; left: 30%;
  transform-origin: 50% 50% -500px;
  outline:1px solid transparent; 
}
figure#spinner img:nth-child(1) { transform:rotateY(0deg); 
}
figure#spinner img:nth-child(2) { transform: rotateY(-45deg); }
figure#spinner img:nth-child(3) { transform: rotateY(-90deg); }
figure#spinner img:nth-child(4) { transform: rotateY(-135deg); }
figure#spinner img:nth-child(5){ transform: rotateY(-180deg); }
figure#spinner img:nth-child(6){ transform: rotateY(-225deg); }
figure#spinner img:nth-child(7){ transform: rotateY(-270deg); }
figure#spinner img:nth-child(8){ transform: rotateY(-315deg); }
div#carousel ~ span { 
  color: #fff; 
  margin: 5%; 
  display: inline-block; 
  text-decoration: none; 
  font-size: 2rem; 
  transition: 0.6s color; 
  position: relative; 
  margin-top: -6rem; 
  border-bottom: none; 
  line-height: 0; }
div#carousel ~ span:hover { color: #888; cursor: pointer; }

JS:

var angle = 0;
function galleryspin(sign) { 
spinner = document.querySelector("#spinner");
if (!sign) { angle = angle + 45; } else { angle = angle - 45; }
spinner.setAttribute("style","-webkit-transform: rotateY("+ angle +"deg); -moz-transform: rotateY("+ angle +"deg); transform: rotateY("+ angle +"deg);");
}

Unfortunately, the carousel is not working properly in IE11. I've tried looking for solutions online, but it seems like most resources cater to the latest versions of Internet Explorer. Since I'm not very experienced in javascript and css, I'm finding it difficult to troubleshoot. Can someone provide assistance?

javascripthtmlcssinternet-explorercarousel

Answer №1

The reason your feature may be failing in IE could be due to the use of transform-style: preserve-3d; on figure#spinner1.

Although IE has better support for CSS3 3D features now, according to caniuse, IE10 and 11 still do not fully support this particular aspect of the 3D transform API. Removing this rule from your CSS shows that the entire 3D layout fails without it.

There might be an alternative way to nest and format your 3D objects to achieve a similar visual effect without using 'preserve-3d', but it could require a more complex implementation than what you currently have.

Alternatively, you could explore using threejs and WebGL to manage your 3D carousel when necessary CSS 3D attributes are not supported by the browser.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The jQuery UI function .autocomplete() helps to enable autocomplete functionality

Autocomplete feature is successfully implemented on my website using the code below: $(function () { $("#client").autocomplete({ source: "/appointments/clients.json", minLength: 1, select: function (event, ui) { $(& ...

javascriptjqueryjsonjquery-uijquery-ui-autocomplete

The .AppendChild() method does not appear to be working as expected following the completion of

Encountering a peculiar problem here. The scripts run smoothly, but the content doesn't display on screen until I "inspect element" and then close the inspector window or zoom in/out. It's not an issue with the "display" CSS property because even ...

javascriptjquerycss

An issue arose following the utilization of "<style lang="scss" scoped>"

After using code from GitHub, I encountered an error. Any tips? I am new to JavaScript and Vue.js, and I'm constantly having issues with modules. I tried: npm uninstall webpack and then: npm install webpack@^4.0.0 --save-dev It's still not wo ...

javascriptvue.jssass

Suggestions for the AJAH Library

Currently, my application is built on classic ASP. I am interested in incorporating AJAX-style partial page updates to improve the user experience and avoid unnecessary server roundtrips. My goal is to have a list of rows displayed with the option to add ...

javascriptajax

Use JavaScript to dynamically generate a drop-down select menu

Is there a way to automatically expand a select menu dropdown using JavaScript or jQuery when a button is clicked? I am facing this challenge because I have a text field that allows users to input custom fields dynamically into a select input. My goal is ...

javascriptjquery

"Efficiently organizing tasks in AngularJS: Utilize Factories for Submitting and Deleting Functions in

While developing a simple To Do App, I noticed that my Controller was getting cluttered with too much code. This made me realize the need to move some of my functions into factories in order to maintain clean and readable code. Below is my JavaScript code ...

javascriptangularjs

Struggling with a findIndex problem in React and JavaScript

Whenever I receive activeFilters values like this: const filter = [...activeFilters] The findIndex function always returns -1 even when the item I'm searching for exists. However, when I receive it like this, it works? const filter = activeFilters ...

javascriptreactjsreact-hooks

What is the best way to create a random key using a factory function?

I am working on a function that generates objects, and I would like to be able to specify the key for the object as a parameter. However, when I try to do this, the function does not recognize the parameter properly and sets its name as the key instead. h ...

javascriptreactjsreact-native

The vanilla JS router seems to be malfunctioning, as it is only showing the [object XMLDocument]

Recently, I attempted to implement routing into my JavaScript application using the following example: link. However, after diligently copying every file from the project, all I see displayed inside the <main></main> tags is "[object XMLDocum ...

javascriptjqueryroutes

Passing values between a JavaScript function and a PHP script - Here's how!

I am looking to display the output of a PHP script in a div tag without having to refresh the page. I have a collection of .c files that users can compile on the server, and I want to list them in a dropdown like this: <option value="" selected="select ...

javascriptphpjqueryhtml

Executing a JavaScript file following an AJAX request in Ruby on Rails

Currently, I am utilizing prismjs to add syntax highlighting to my Rails application. The stylesheet and js file have been included in my layout, however, an issue arises where the code is only highlighted once during the initial page load. Subsequently, a ...

javascriptruby-on-rails

Modify the contents of a textbox by editing the text as you type

Text within the text box follows this format: login -u username -p password When entering this text, I want to substitute 'password' with a series of '*'s equal in length. For example: 'login -u <a href="/cdn-cgi/l/email-prot ...

javascriptjqueryhtmlangularjs

Swiper.IO pagination indicators not displaying

Why is the pagination not showing up on the image carousel I created with Swiper? Despite being in the DOM, it has a height of 0 and manual changes have no effect. Any suggestions? import Swiper from '../../vendor/swiper.min.js'; export default ...

javascriptcssvue.jsswiper.js

Issue with div not resizing as content is added

HTML Code <div class="container"> <div class="tip_text">A</div> <div class="tip_content">text example</div> </div> <br /><br /><br /> <div class="container"> <div class="tip_text ...

csshtml

Guide on how to smoothly navigate through an HTML page to a specific anchor point

Is there a way to use JavaScript to make the browser scroll the page to a specific anchor? In my HTML code, I have set either a name or id attribute like this: <a name="anchorName">..</a> or <h1 id="anchorName2">..&l ...

javascriptjqueryhtmlscrollanchor

Update text based on the status of a boolean variable in AngularJS

I am creating a container using ng-repeat, and here is the corresponding HTML code: <div class="mission_box clearfix" ng-repeat="mission in missions"> <img src="images/tick_patch.png" class="expired_img"> <h2>{{mission.name}}< ...

javascripthtmlangularjsfilter

The absence of HTML and CSS is preventing the inclusion of an Ajax image viewer, back button, and

Currently, I am experimenting with jQuery and JavaScript to create an ajax overlay image viewer for a PHP website. After adding this code snippet at the end of the 'gallery page', I can successfully open the viewer and navigate using the next and ...

javascriptjqueryajaxhtml5-history

Can Google analytics track and record events that occur when a GA session comes to an end

Is there a way to trigger an event in Google Analytics once a user's session comes to an end? (Not referring to a local session, but one tracked by Google Analytics). Based on information from https://support.google.com/analytics/answer/2731565?hl=en ...

javascriptjquerygoogle-analyticsgtag.jsanalytics.js

I am having difficulty combining 2 HTML pages without the output becoming distorted

Having encountered issues when combining two HTML pages, one for a navbar and the other for a contact form in my Django project. The resultant single page appears distorted as shown in the image below. I attempted to use sections but it does not seem to re ...

htmlcssdjango

Utilize CSS to ensure that the hover effect of the main navigation remains active even when the mouse hovers over the sub-menu

Is there a way to make the hover state in navigation items persist when the mouse hovers over a sub-menu? Currently, when hovering over a top-level nav item, the link color changes to white and background turns black, but this reverts back once the mouse m ...

csshover