OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to make a 3D carousel responsive on mobile

  • Thread starter Thread starter Ahmed88
  • Start date Start date
A

Ahmed88

Guest
I'm having an issue to make 3D carousel responsive on mobile. I tried adding img-fluid class using Bootstrap but it messes my web view.

Below is css code in html


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

Code:
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; 
    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; 
}

Code:
<body>
  <base href="https://picsum.photos/200/300">
  <div id="carousel">
  <figure id="spinner">
  <img src="https://picsum.photos/id/237/200/300" alt>
  <img src="https://picsum.photos/seed/picsum/200/300" alt>
  <img src="https://picsum.photos/200/300" alt>
  <img src="https://picsum.photos/id/237/200/300" alt>
  <img src="https://picsum.photos/seed/picsum/200/300" alt>
  <img src="https://picsum.photos/200/300" alt>
  <img src="https://picsum.photos/id/237/200/300" alt>
  <img src="https://picsum.photos/seed/picsum/200/300" 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>
</body>

I read online that I can make a mobile view website by adding some code. Is that true, can I make it responsive just by that or do I need Bootstrap?

<p>I'm having an issue to make 3D carousel responsive on mobile. I tried adding img-fluid class using Bootstrap but it messes my web view.</p>
<p>Below is css code in html</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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);");
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><body>
<base href="https://picsum.photos/200/300">
<div id="carousel">
<figure id="spinner">
<img src="https://picsum.photos/id/237/200/300" alt>
<img src="https://picsum.photos/seed/picsum/200/300" alt>
<img src="https://picsum.photos/200/300" alt>
<img src="https://picsum.photos/id/237/200/300" alt>
<img src="https://picsum.photos/seed/picsum/200/300" alt>
<img src="https://picsum.photos/200/300" alt>
<img src="https://picsum.photos/id/237/200/300" alt>
<img src="https://picsum.photos/seed/picsum/200/300" 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>
</body></code></pre>
</div>
</div>
</p>
<p>I read online that I can make a mobile view website by adding some code. Is that true, can I make it responsive just by that or do I need Bootstrap?</p>
 

Latest posts

Online statistics

Members online
0
Guests online
4
Total visitors
4
Ads by Eonads
Top