/////Question///////////////////////////////
Fancyapps carousel that changes image and text: I have been attempting a carousel that when clicked change the image and text. I have the text sorta… it at least moves like it should// it just wont take up the full width for some reason. Same with my images. They are both squeezing into the full width at the same time. I don’t think I put any of my code in here the right way but I have included some screenshots of what everything currently looks like with code below and some of what it should look like (from my other sections just without the carousel currently).[current-mobile][1][current-tablet/desktop][2] [final-mobile][3][final-tablet/mobile][4]
Any and all thoughts would be appreciated! I am very much a newbie just trying my best!!! Thanks!
window.addEventListener('load', function() {
// Initialise Carousel
const myCarousel = new Carousel(document.querySelector("#pub-carousel"), {
'center': false,
slidesPerPage: 1,
on: {
change: (carousel, to) => {
// Clear active elements
document.querySelectorAll("#pub-carousel .is-active").forEach((el) => {
el.classList.remove("is-active");
});
// Mark current elements as active
document.querySelectorAll(`#pub-carousel [data-for="${to}"], #publication-text [data-for="${to}"]`).forEach((el) => {
el.classList.add("is-active");
});
},
},
});
});
Fancybox.bind('[data-fancybox="inspire"]', {
Carousel: {
on: {
change: (that) => {
myCarousel.slideTo(myCarousel.findPageForSlide(that.page), {
friction: 0,
});
},
},
},
}); #publication {
width: 100vw;
height: 100%;
background-color: var(--white);
#publication-container {
height: 100%;
width: 100%;
//overflow: hidden;
display: grid;
grid-template-areas: "publication-image-1" "publication-text";
@include md {
grid-template-areas: "publication-image-1 publication-text";
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(1, 100%);
gap: 30px;
}
#publication-image-container {
grid-area: publication-image-1;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
ul {
width: 100%;
height: 609px;
display: flex;
align-items: center;
justify-content: center;
@include md {
height: 750px;
}
li {
background-position: center;
background-size: cover;
border: 5px red solid;
height: 100%;
width: 100%;
a:link,
a:visited {
height: 609px;
width: 100%;
display: inline-block;
@include md {
height: 750px;
}
}
}
}
.carousel {
height: 100%;
width: 100%;
color: #170724;
--carousel-button-svg-width: 20px;
--carousel-button-svg-height: 20px;
--carousel-button-svg-stroke-width: 2.5;
.carousel__viewport {
width: 100%;
height: 100%;
}
.carousel__slide {
// width: var(--carousel-slide-width, 100%)!important;
//min-width: 100% !important;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.carousel__button {
z-index: 2;
}
.carousel__button.is-prev {
left: 10rem;
top: 45rem;
}
.carousel__button.is-next {
right: 10rem;
top: 45rem;
}
.carousel__dots {
top: calc(100% - 22px);
color: #000;
z-index: 300;
//position: static;
.has-dots {
margin-bottom: 0px;
}
}
.carousel__image-container {
position: absolute;
top: 0;
left: 0;
right: 55%;
bottom: 0;
z-index: 1;
//overflow: hidden;
}
.carousel__image-container ul {
margin: 0;
padding: 0;
//overflow: hidden;
height: 100%;
width: 100%;
}
.carousel__image-container li {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.35s;
user-select: none;
}
.carousel__image-container li a:link a:visited {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.carousel__image-container li.is-active {
opacity: 1;
}
}
#publication-1 {
background-image: url('http://www.birds.com/wp-content/uploads/home/bird4.jpg');
;
// position: absolute;
// width: 100%;
// max-height: 609px;
}
#publication-2 {
background-image: url('http://www.birds.com/wp-content/uploads/home/bird4.jpg');
;
// position: absolute;
// width: 100%;
// max-height: 609px;
}
#publication-text-container {
grid-area: publication-text;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
padding-bottom: 30px;
padding-top: 5%;
@include md {
padding-top: 0%;
}
#publication-text {
max-width: 450px;
color: var(--black);
@include md {
max-width: 325px;
padding-right: 30px;
}
@include lg {
//max-width: 400px;
}
h1 {
font-weight: 800;
font-size: rem-calc(26);
padding-bottom: 10px;
@include md {
font-size: rem-calc(40);
}
}
h3 {
font-weight: 800;
font-size: rem-calc(20);
padding-bottom: 10px;
@include md {
padding-bottom: 20px;
}
}
p {
font-weight: 400;
font-size: rem-calc(16);
line-height: 1.3em;
@include md {
font-size: rem-calc(20);
}
}
}
}
}
}<section id="publication">
<div id="pub-carousel" class="carousel">
<div id="publication-container">
<div id="publication-image-container" class="carousel__image-container" class="carousel__slide">
<ul id="publication-carousel">
<li id="publication-1" class="is-active" class="pub-image" data-for="0">
<a href='http://www.birds.com/wp-content/uploads/home/bird4.jpg' data-fancybox="inspire"></a>
</li>
<li id="publication-4" class="pub-image" data-for="1">
<a href='http://www.birds.com/wp-content/uploads/home/bird4.jpg' data-fancybox="inspire"></a>
</li>
<li id="publication-2" style="display:none; visibility: hidden">
<a href="img/Inspirespread.jpg" data-fancybox="inspire"></a>
</li>
<li id="publication-3" style="display:none; visibility: hidden">
<a href="img/inspirelast.jpg" data-fancybox="inspire"></a>
</li>
</ul>
</div>
<div id="publication-text-container" class="carousel__viewport">
<div class="carousel__track">
<div id="publication-text" class="carousel__slide">
<h1 id="publication-h1" class="project-topic">
Publication Design
</h1>
<h3 id="publication-h3" class="project-title">
Inspire Magazine
</h3>
<p id="publication-p1" class="project-text">
This publication design is called Inspire, a magazine about achieving luxury interior design for everyone. This publication is a large format with a quarterly subscription. It has a strict three-column grid with the top third of the magazine dedicated
to image space and or textures. The masthead has the ability to move locations and interact with the cover, and the masthead applications can be seen within the magazine.
</p>
</div>
<div id="publication-text" class="carousel__slide">
<h1 id="publication-h1" class="project-topic">
Publication Design
</h1>
<h3 id="publication-h3" class="project-title">
Mercury and the Workmen
</h3>
<p id="publication-p1" class="project-text">
This publication design is called Inspire, a magazine about achieving luxury interior design for everyone. This publication is a large format with a quarterly subscription. It has a strict three-column grid with the top third of the magazine dedicated
to image space and or textures. The masthead has the ability to move locations and interact with the cover, and the masthead applications can be seen within the magazine.
</p>
</div>
</div>
</div>
</div>
</div>
</section>///////JS//////////////////////////////////
import { Fancybox } from "@fancyapps/ui";
import { Carousel } from "@fancyapps/ui";
window.addEventListener('load', function(){
// Initialise Carousel
const myCarousel = new Carousel(document.querySelector("#pub-carousel"), {
'center': false,
slidesPerPage: 1,
on: {
change: (carousel, to) => {
// Clear active elements
document.querySelectorAll("#pub-carousel .is-active").forEach((el) => {
el.classList.remove("is-active");
});
// Mark current elements as active
document.querySelectorAll(`#pub-carousel [data-for="${to}"], #publication-text [data-for="${to}"]`).forEach((el) => {
el.classList.add("is-active");
});
},
},
});
});
Fancybox.bind('[data-fancybox="inspire"]', {
Carousel: {
on: {
change: (that) => {
myCarousel.slideTo(myCarousel.findPageForSlide(that.page), {
friction: 0,
});
},
},
},
});
[1]: https://i.stack.imgur.com/ILM9E.jpg
[2]: https://i.stack.imgur.com/HgX71.png
[3]: https://i.stack.imgur.com/mTrBs.jpg
[4]: https://i.stack.imgur.com/5arYK.jpg