I'm trying to create a vertical carousel on bootstrap 5. I'm using this code for reference. I understand it was built on a different version of bootstrap but I can't seem to translate it to bootstrap 5. I have this so far. When ran, the website is blank. I'm also not sure if I've linked the CSS and JS properly in my html.
HTML
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript"src="{{ url_for('static', filename='js/scripts.js')}}"></script>
<link rel="stylesheet/less" type="text/css" href="{{ url_for('static', filename='less/mystyles.less')}}">
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div class="carousel slide vertical" id="carousel-vertical" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carousel-vertical" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carousel-vertical" data-bs-slide-to="1"></li>
<li data-bs-target="#carousel-vertical" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</body>
</html>
JS
$(document).ready(function() {
var delta = 0;
var scrollThreshold = 5;
// detect available wheel event
wheelEvent = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel"
document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel"
"DOMMouseScroll"; // let's assume that remaining browsers are older Firefox
// Bind event handler
$(window).on(wheelEvent, function (e) {
// Do nothing if we weren't scrolling the carousel
var carousel = $('.carousel.vertical:hover');
if (carousel.length === 0) return;
// Get the scroll position of the current slide
var currentSlide = $(e.target).closest('.item')
var scrollPosition = currentSlide.scrollTop();
// --- Scrolling up ---
if (e.originalEvent.detail < 0 || e.originalEvent.deltaY < 0 || e.originalEvent.wheelDelta > 0) {
// Do nothing if the current slide is not at the scroll top
if(scrollPosition !== 0) return;
delta--;
if ( Math.abs(delta) >= scrollThreshold) {
delta = 0;
carousel.carousel('prev');
}
}
// --- Scrolling down ---
else {
// Do nothing if the current slide is not at the scroll bottom
var contentHeight = currentSlide.find('> .content').outerHeight();
if(contentHeight > currentSlide.outerHeight() && scrollPosition + currentSlide.outerHeight() !== contentHeight) return;
delta++;
if (delta >= scrollThreshold)
{
delta = 0;
carousel.carousel('next');
}
}
// Prevent page from scrolling
return false;
});
})
CSS(less)
.carousel .item {
padding-bottom: 720/1280 * 100%;
background-size: cover;
&:nth-child(1) { background-image: url('https://via.placeholder.com/1280x720?text=Slide 1'); }
&:nth-child(2) { background-image: url('https://via.placeholder.com/1280x720?text=Slide 2'); }
&:nth-child(3) { background-image: url('https://via.placeholder.com/1280x720?text=Slide 3'); }
}
.carousel.vertical .carousel-inner > .item {
-webkit-transition: .6s ease-in-out top;
-o-transition: .6s ease-in-out top;
transition: .6s ease-in-out top;
}
#media all and (transform-3d),
(-webkit-transform-3d) {
.carousel.vertical .carousel-inner > .item {
-webkit-transition: -webkit-transform .6s ease-in-out;
-ms-transition: -ms-transform .6s ease-in-out;
-o-transition: -o-transform .6s ease-in-out;
transition: transform .6s ease-in-out;
-ms-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-ms-perspective: 1000;
-webkit-perspective: 1000;
perspective: 1000;
}
.carousel.vertical .carousel-inner > .item.next,
.carousel.vertical .carousel-inner > .item.active.right {
top: 0;
-ms-transform: translate3d(0, 100%, 0);
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
.carousel.vertical .carousel-inner > .item.prev,
.carousel.vertical .carousel-inner > .item.active.left {
top: 0;
-ms-transform: translate3d(0, -100%, 0);
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
.carousel.vertical .carousel-inner > .item.next.left,
.carousel.vertical .carousel-inner > .item.prev.right,
.carousel.vertical .carousel-inner > .item.active {
top: 0;
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.carousel.vertical .carousel-inner > .active {
top: 0;
}
.carousel.vertical .carousel-inner > .next,
.carousel.vertical .carousel-inner > .prev {
top: 0;
height: 100%;
width: 100%;
}
.carousel.vertical .carousel-inner > .next {
left: 0;
top: 100%;
}
.carousel.vertical .carousel-inner > .prev {
left: 0;
top: -100%
}
.carousel.vertical .carousel-inner > .next.left,
.carousel.vertical .carousel-inner > .prev.right {
top: 0;
}
.carousel.vertical .carousel-inner > .active.left {
left: 0;
top: -100%;
}
.carousel.vertical .carousel-inner > .active.right {
left: 0;
top: 100%;
}
.carousel.vertical .carousel-indicators,
.carousel-indicators-vertical {
right: 20px;
top: 50%;
transform: translate(-50%);
bottom: auto;
left: auto;
width: auto;
margin: 0;
padding: 0;
li {
display: block;
margin: 5px 0;
}
}
1) Getting the right setup for Bootstrap :
you have 2 ways of using the framework -> download the files OR link the files
which one should you use ? I like downloading the files better so I can go and see what's going on. It also allows me to modify the things I want from the source code and not do "orders / counter-orders" with my own CSS / JS files.
where to get those links -> in Bootstrap "Getting Started" section (homepage - link here)
where to download the files ? -> in Bootstrap download section (here)
where should you place the links / scripts ? -> Links are in the head section of HTML but I really suggest putting the script right before the end of the body. Why ? So your HTML structure/elements are loaded, and THEN only you can put eventlisteners and modifiers on those loaded elements.
2) How to make the carousel vertical ?
how does it currently work ? The carousel works in horizontal mode using Bootstrap Framework. If you go into their CSS files, you will understand how it works. It mainly uses a float: left, display:none and transform: translateX(...) properties to make it work horizontally.
what must you do to make it vertical ? Well, you need to get the float:left off the code and you need to change the transform-:translateX(...) to a transform-:translateY(...)
transitions, awful ? I know, it doesn't look great. One thing you can do, first, to make it a little less "jumpy", is set a fixed height to the carousel-inner class.
If you want the buttons (next / previous) to be vertical, you will need to work on their positionning (currently, their classes are in left: 0 / right: 0 .
The classes are : .carousel-control-prev /.carousel-control-next
3) Illustrated idea:
What vertical CSS modifications look like :
More info on the "Getting the right setup for Bootstrap" :
The link files of Bootstrap :
The download section of Bootstrap :
The .zip files for CSS, example :
Don't forget to "link" the download files into your html.
Example for CSS : <link rel="stylesheet" href="./bootstrap.css">
Related
I was following a Youtube tutorial to create a Memory Card game. Halfway through I started to tinker to see if I could figure out the steps myself. I have a div that looks like this:
<div class="memory-card">
<img class="front-face" src="img/aurelia.svg" alt="Aurelia">
<img class="back-face" src="img/js-badge.svg" alt="JSBadge">
</div>
The CSS for this div looks like this
.memory-card {
width: calc(25% - 10px);
height: calc(33.33% - 10px);
position: relative;
margin: 5px;
transition: transform 0.2s;
}
.memory-card:active {
transform: scale(0.97);
transition: transform 0.2s;
}
.flip {
transform: rotateY(180deg);
transition: transform 0.2s;
}
The class "flip" is added to the div by toggling on the classList of the memory-card element when a click occurs. Essentially what this does is that when the memory-card is clicked and held it becomes active and scales to 0.97 and when released it is rotated by 180 degrees around the Y-axis (class="memory-card flip").
Before click
However, when I click again (and hold) it rotates again without waiting for the click to be released. As per my understanding (which has a hole that I hope you can fill), the card (which the div represents btw) should rotate only after I release the click. Can anybody help? This seems like an issue that must have been answered before but for the life of me, I could not find it.
Try like this:
var memorycard = document.querySelector('.memory-card');
memorycard.onclick = function(e) {
memorycard.classList.toggle('flip');
};
.memory-card {
width: calc(25% - 10px);
height: calc(33.33% - 10px);
position: relative;
margin: 5px;
transition: transform 0.2s;
}
.memory-card:active {
transform: scale(0.97);
}
.memory-card.flip:active {
transform: rotateY(180deg) scale(0.97);
}
.flip {
transform: rotateY(180deg);
}
img {
width: 100%;
height: auto;
}
<div class="memory-card">
<img class="front-face" src="https://i.stack.imgur.com/esMJU.png" alt="Aurelia">
<img class="back-face" src="https://i.stack.imgur.com/xR2ZZ.png" alt="JSBadge">
</div>
.flip has this CSS property: transform: rotateY(180deg);. However, as soon as the click begins, .memory-card:active is applied, so that property gets overwritten as transform: scale(0.97);. The solution is to specify that when the .flip class is present, both transform functions should be applied:
.memory-card.flip:active {
transform: rotateY(180deg) scale(0.97);
}
I want to animate (fade-in) a div at or after the initial mounting of a component. After the animation is done, the div shouldn't disappear. I am trying to use CSSTransition component and looking examples on reactcommunity.org but I couldn't achieve any animation at all. I don't have any value that comes from somewhere for in, so I tried both trueand false but nothing changed.
CSS
.example-enter {
opacity: 0;
}
.example-enter-active {
opacity: 1;
transition: opacity 300ms;
}
.example-exit {
opacity: 1;
}
.example-exit-active {
opacity: 0;
transition: opacity 300ms;
}
React
<CSSTransition classNames='example' in={false} timeout={200}>
<div
className='abc'
data-description="abc">
<div className='inner'>
<div className='head'>A</div>
<div className='explanation'>A</div>
</div>
</div>
</CSSTransition>
If you want to transition on the first mount set appear to true: Transition-prop-appear
You can try this:
<CSSTransition
in={true}
timeout={1000}
classNames="fade"
appear={true}
>
<div className="box" />
</CSSTransition>
Css:
.fade-appear {
opacity: 0;
transform: scale(0.2);
}
.fade-appear-active {
opacity: 1;
transform: scale(1);
transition: all 1000ms;
}
.box {
width: 50px;
height: 50px;
background: aqua;
}
See my code detail here: https://codesandbox.io/s/csstransition-component-okpue
Another easy way is to use CSS animations. no need to set extra class for your element.
Just use it in your desired element's CSS code :
Thanks to animate.css plugin for CSS, take a look at it:
https://daneden.github.io/animate.css/
the example:
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.elem {
padding: 40px 30px;
background: #aaa;
animation: fadeIn 2s;
}
<div class="elem">
Hello, this is a text
</div>
I've commented out/deleted the following code for the header-bg's zoom animation, but it's still running on my site and appears in console:
/*
#keyframes bg-zoom {
0% {
transform: scale(1);
-webkit-transform: scale(1);
}
100% {
transform: scale(1.3);
-webkit-transform: scale(1.3);
}
}
*/
.home-header-wrapper-bg {
content: "";
background: #fff url("...") center center no-repeat fixed;
background-size: cover;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 0;
/*
animation: bg-zoom 30s infinite alternate ease-in-out;
-webkit-animation: bg-zoom 30s infinite alternate ease-in-out;
*/
}
I've also cleared my cache. Demo: here
In your HTML file not css file, find this code and remove it
var x;
$(window).on('scroll', function() {
x = $(window).scrollTop();
$('.home-header-wrapper-bg').css('background-size', 100 + parseInt(x / 1, 0) + '% ');
});
Also remove this one too:
$(window).scroll(function(){
$(".home-header-container").css("opacity", 1 - $(window).scrollTop() / 500);
});
It looks like it's probably some javascript that is causing that. When I inspect the "home-header-wrapper-bg" and begin scrolling, it starts to change the opacity and background-size inline and not in a stylesheet.
I'm working on making a sidebar on My main page something like google ventures (https://www.gv.com/lib/how-to-choose-the-right-ux-metrics-for-your-product). but the problem I'm getting is when I click to any menu item in the sidebar , the side bar gets collapse but the text for menu item is still there. I want to keep the sidebar open till the mouse cursor is in the sidebar area (even when user clicks on any menu it should remain opened/expended) but it gets collapse on cliking on any item while the text for the menu item remain in the air. I don't know how to fix it as Im not much hands-on with css and designing.
here is my jquery code for adding classes for collapse/expand the side bar
$('[data-toggle="offcanvas"]').mouseenter(function(e) {
e.preventDefault();
if ($("body").hasClass('sidebar-collapse')) {
$("body").removeClass('sidebar-collapse');
$("body").addClass('sidebar-open')
}
});
$('[data-toggle="offcanvas"]').mouseleave(function(e) {
e.preventDefault();
if ($("body").hasClass('sidebar-open')) {
$("body").removeClass('sidebar-open');
$("body").addClass('sidebar-collapse')
};
});
and here are css classes (with media queries) for this
.main-sidebar,
.left-side {
position: absolute;
top: 0px;
left: 0;
padding-top: 50px;
min-height: 100%;
width: 230px;
z-index: 0;
-webkit-transition: -webkit-transform 0.3s ease-in-out, width 0.3s ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in-out, width 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out, width 0.3s ease-in-out;
transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
}
#media (max-width: 767px) {
.main-sidebar,
.left-side {
-webkit-transform: translate(-230px, 0);
-ms-transform: translate(-230px, 0);
-o-transform: translate(-230px, 0);
transform: translate(-230px, 0);
}
}
#media (min-width: 768px) {
.sidebar-collapse .main-sidebar,
.sidebar-collapse .left-side {
-webkit-transform: translate(-230px, 0);
-ms-transform: translate(-230px, 0);
-o-transform: translate(-230px, 0);
transform: translate(-230px, 0);
}
}
#media (max-width: 767px) {
.sidebar-open .main-sidebar,
.sidebar-open .left-side {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
}
.sidebar {
padding-bottom: 10px;
}
and here is html code where my sidebar resides
<aside class="main-sidebar" data-toggle="offcanvas">
<section class="sidebar">
<ul class="sidebar-menu">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</section>
<aside>
I tried to implement it on mouseclick event by keeping adding the sidebar-open class but this didn't work. Any help would be highly appreciated. Thanks
You can put the text in an element like, say p's. Then you can you try hiding the them when mouse leaves and show them when mouse enters. You can add the lines similar to the below ones in your jquery.
// on mouse leave
$('ul.sidebar-menu li>p').hide();
// on mouse enter
$('ul.sidebar-menu li>p').show();
Edit ---
Alternatively you can try the below CSS for aside.main-sidebar,
white-space: nowrap;
overflow: hidden;
After looking through IE10's developer blog I have found that they do not support the preserve-3d setting.
I found this cube originally made by Paul Hayes which is working with touch screens and quite popular.
Altough preserve-3d setting is a known issue, I couldn't achieved suggested work around because it seems there is no transform property in the parent to maually apply to the child elements.
Here is the link that I simplified so far: http://jsfiddle.net/cC4Py/1/
CSS:
.viewport {
perspective: 800px;
perspective-origin: 50% 200px;
transform: scale(0.75,0.75);
-webkit-perspective: 800;
-webkit-perspective-origin: 50% 200px;
-webkit-transform: scale(0.75,0.75);
-moz-perspective: 800;
-moz-perspective-origin: 50% 200px;
-moz-transform: scale(0.75,0.75);
}
.cube {
position: relative;
margin: 0 auto;
height: 400px;
width: 400px;
transition: transform 50ms linear;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 50ms linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform 50ms linear;
-moz-transform-style: preserve-3d;
}
.cube > div {
position: absolute;
height: 360px;
width: 360px;
padding: 20px;
background-color: rgba(50, 50, 50, 1);
font-size: 1em;
line-height: 1em;
color: #fff;
border: 1px solid #555;
border-radius: 3px;
transition: -webkit-transform 50ms linear;
}
.cube > div:first-child {
transform: rotateX(90deg) translateZ(200px);
-webkit-transform: rotateX(90deg) translateZ(200px);
-moz-transform: rotateX(90deg) translateZ(200px);
}
.cube > div:nth-child(2) {
transform: translateZ(200px);
-webkit-transform: translateZ(200px);
-moz-transform: translateZ(200px);
}
.cube > div:nth-child(3) {
transform: rotateY(90deg) translateZ(200px);
-webkit-transform: rotateY(90deg) translateZ(200px);
-moz-transform: rotateY(90deg) translateZ(200px);
text-align: center;
}
.cube > div:nth-child(4) {
transform: rotateY(180deg) translateZ(200px);
-webkit-transform: rotateY(180deg) translateZ(200px);
-moz-transform: rotateY(180deg) translateZ(200px);
}
.cube > div:nth-child(5) {
transform: rotateY(-90deg) translateZ(200px);
-webkit-transform: rotateY(-90deg) translateZ(200px);
-moz-transform: rotateY(-90deg) translateZ(200px);
}
.cube > div:nth-child(5) p {
text-align: center;
font-size: 2.77em;
margin: 40px;
line-height: 60px;
}
.cube > div:nth-child(6) {
transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
}
object {
opacity: 0.9;
}
object:hover {
opacity: 1;
}
HTML:
<body class="experiment">
<div class="viewport">
<section class="cube" style="transition: 500ms; -webkit-transition: 500ms;">
<div>MELABA!</div>
<div>
<h2>3D cube</h2>
<time>28th September 2010</time>
<p>By Paul Hayes</p>
<p>3D cube built using css, webkit-perspective and webkit-transform. Rotation via webkit-transition.</p>
<p>Use arrow keys to navigate, or click and hold mouse. On touch screens, use one finger to rotate. Press ESC to reset.</p>
<p>Read more »</p>
</div>
<div>
<object width="360" height="360"><param name="movie" value="http://www.youtube.com/v/MY5PkidV1cM?fs=1&hl=en_GB&rel=0"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/MY5PkidV1cM?fs=1&hl=en_GB&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="360" height="360">
</object>
</div>
<div>
<h2>Learn how to make a cube</h2>
<time>17th July 2009</time>
<p>By Paul Hayes</p>
<p>“A 3D cube can be created solely in CSS, with all six faces.”</p>
<p>Article: Cube explanation</p>
</div>
<div>
<p>I design and build websites in Brighton</p>
</div>
<div>
<small>Nothing down here.</small>
</div>
</section>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://www.paulrhayes.com/experiments/cube-3d/js/experiment.js?13"></script>
</body>
I created copies of every property without -webkit- prefix. Am I doing anything wrong? What should I do next?
First of all, dragging and interaction in general usually means JavaScript. Yes, there are CSS hacks and I've used and abused them myself, but in this case it would be absolutely insane not to use JS.
So that means that you need to chain all the transforms from the ancestors (that means the rotation of the cube itself and the perspective you'd normally set on the parent of the cube) onto the faces of the cube via JavaScript.
You can do this in a few ways. In this case, I've used the style property of the face element, but you can also insert the styles into a style element.
Anyway...
demo
Relevant HTML:
<div class='cube'>
<div class='face'></div>
<!-- five more faces -->
</div>
Relevant CSS:
Since I'll be changing transform values via JS, I didn't bother setting them in the CSS.
.cube, .cube * {
position: absolute;
top: 50%; left: 50%;
}
.face {
margin: -8em;
width: 16em; height: 16em;
}
JS:
The code below is quick and dirty and can be improved.
var faces = document.querySelectorAll('.face'),
n = faces.length,
styles = [],
_style = getComputedStyle(faces[0]),
factor = 3,
side = parseInt(_style.width.split('px')[0], 10),
max_amount = factor*side,
unit = 360/max_amount,
flag = false,
tmp, p = 'perspective(32em) ';
for(var i = 0; i < n; i++) {
tmp = ((i < 4) ? 'rotateY(' + i*90 + 'deg)' :
'rotateX(' + Math.pow(-1, i)*90 + 'deg)') +
' translateZ(' + side/2 + 'px)';
faces[i].style.transform = p + tmp;
faces[i].style['-webkit-transform'] = p + tmp;
styles.push(tmp);
}
var drag = function(e) {
var p1 = { 'x': e.clientX - p0.x, 'y': e.clientY - p0.y },
angle = {'x': -p1.y*unit, 'y': p1.x*unit};
for(var i = 0; i < n; i++) {
tmp = 'rotateX(' + angle.x + 'deg)' +
'rotateY(' + angle.y + 'deg)' + styles[i];
faces[i].style.transform = p + tmp;
faces[i].style['-webkit-transform'] = p + tmp;
}
};
window.addEventListener('mousedown', function(e) {
var t = e.target;
if(t.classList.contains('face')){
p0 = { 'x': e.clientX, 'y': e.clientY };
flag = true;
window.addEventListener('mousemove', drag, false);
}
else {
flag = false;
}
}, false);
window.addEventListener('mouseup', function(e) {
if(flag) {
for(var i = 0; i < n; i++) {
_style = faces[i].style;
tmp = _style.transform || _style['-webkit-transform'];
styles[i] = tmp.replace('perspective(32em) ', '');
}
}
flag = false;
window.removeEventListener('mousemove', drag, false);
}, false);
Personally, I prefer using CSS #keyframes, and setting up animations that way, to using JS. JS tends to introduce jank and freeze up pages. CSS, especially in Firefox, but also in Chrome, is very fast and smooth for 3d vizualization and animation. IE has a problem by not including preserve-3d. Until it does, I won't worry about whether things look as intended in IE. Just try to make sure there's an acceptibly graceful degredation if you have to support IE.