Tips for creating a mobile-friendly 3D carousel

Question

Tips for creating a mobile-friendly 3D carousel

My current challenge involves making a 3D carousel responsive on mobile devices. I attempted to use the img-fluid class with Bootstrap, but encountered issues that affected my web view.

Below is the CSS code within HTML:

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);");
    }

div#carousel { 
    perspective: 1200px; 
    background: black; 
    padding-top: 10%; 
    font-size:0; 
    margin-bottom: 3rem; 
    overflow: hidden; 
}
figure#spinner { 
    transform-style: preserve-3d; 
    height: 300px; 
    ... (CSS code continues)

<body>
  <base href="https://picsum.photos/200/300">
  <div id="carousel">
  ... (HTML code continues)
</body>

I came across information online suggesting that adding specific code could make a website mobile-responsive. Do you think this approach alone is sufficient, or would it be better to incorporate Bootstrap for responsiveness?

javascript html css

Answer 1

Answer №1

Is this what you are referring to?: example

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  from {transform: rotateY(0deg)}
    to {transform: rotateY(360deg)}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>


</body>
</html>

Answer 2

Is this what you are referring to?: example

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  from {transform: rotateY(0deg)}
    to {transform: rotateY(360deg)}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>


</body>
</html>

Tips for creating a mobile-friendly 3D carousel

Answer №1

Similar questions

Troubleshooting Problems with Node.js and MongoDB Integration during the .save() Process

What is the best way to incorporate background colors into menu items?

Error: The server is unable to process the POST request to /api

Is the Node.js debugger programmed to issue SIGINT/SIGTERM signals upon exiting via Ctrl-C?

What is preventing me from accessing the hidden article using the URL with the hashname?

The process of ensuring an element is ready for interaction in Selenium with Javascript

Unexpected Website Homepage (Vue / Javascript)

Step-by-step guide on making a duplicate of a Search bar

What is preventing setAttribute from successfully setting the class for the li element?

Switch out the smaller thumbnail image with a more enlarged image

Modify the filtered class of ng-repeat using the $index value from the controller

What is causing the image to move to the following line?

The conditional comment designed for browsers other than Internet Explorer may not work properly on outdated versions of

Is there a way to incorporate multiple plan tiers on Stripe's platform?

Changed the form to become scrollable once it reaches a designated section during scrolling

How to modify this to return a function and eliminate the need for declaring a function

Achieving Automatic Scrolling of Drawer in Material UI React JS

Is it possible to transition to React without having a comprehensive understanding of JavaScript?

Using PHP to make an Ajax call that takes users to an action page when they submit a form

JavaScript: Implementing lodash/fp flow to retrieve a collection of objects