We Keep Coding

I have a question about gasp scrollTrigger resposive

I am currently creating a page using Slick Slider and GSAP. However, in the responsive mobile size, the GSAP next to the slick slider fails to capture the area and becomes invisible on the screen. However, it appears on the screen again when resized. Is there a solution to this problem?
//slick-slider
$('.b_card_case').slick({
dots: false,
infinite: true,
autoplay: true,
speed: 300,
slidesToShow: 4,
slidesToScroll: 1,
prevArrow: $('#arrow_prev2'),
nextArrow: $('#arrow_next2'),
responsive: [{
breakpoint: 1400,
settings: {
arrows: false,
dots: true,
}
},
{
breakpoint: 1024,
settings: {
arrows: false,
dots: true,
slidesToShow: 3,
slidesToScroll: 1,
}
},
{
breakpoint: 600,
settings: {
arrows: false,
dots: true,
slidesToShow: 2,
slidesToScroll: 2
}
}
]
});
//GSAP SCROLL TRIGER
gsap.from(".sec_tit3", {
scrollTrigger: {
trigger: ".sec_tit3",
scrub: 1,
start: "-100px 95%",
end: "top 65%",
toggleActions: "restart pause reverse pause",
},
opacity: 0,
y: 100,
});
gsap.from(".noti", {
scrollTrigger: {
trigger: ".noti",
scrub: 1,
start: "100px 85%",
end: "top 65%",
toggleActions: "restart pause reverse pause",
// markers: true,
},
opacity: 0,
y: 200,
});
I want to know the resolution time of these problems.

how to stop the items in the next slide while autoplaying on the current slide in Owl-carousel?

i have a bug is my all carousel--nested runs at the same time. I want when I'm in the first owl-carousel, only the owl--nested in it will run
$(".owl-carousel").owlCarousel({
navElement: "span",
dots: false,
autoplay: true,
autoplayTimeout: 2000 * 4,
smartSpeed: 200,
autoplayHoverPause: true,
thumbs: true,
thumbsPrerendered: true,
loop: true,
mouseDrag: false,
touchDrag: false,
items: 1,
});
///carousel--nested
$(".owl-carousel--nested").owlCarousel({
autoplay: true,
autoplayTimeout: 2000,
autoplayHoverPause: true,
smartSpeed: 2000,
center: true,
dots: true,
loop: true,
items: 4,
responsive: {
0: {
items: 3,
},
600: {
items: 3,
},
1025: {
items: 3,
},
},
});

Slick slider working after some second after reloding page

This is my code please check - it's working after some time after reloading the page please help me on this
I am trying to get slick slider when I reload page, but it's only working after some time
$(document).ready(function() {
$('.template-blog .mobile-tag-slider').slick({
dots: false,
infinite: true,
arrows: false,
slidesToShow: 4,
slidesToScroll: 1,
centerMode: true,
centerPadding: '90px',
mobileFirst: true,
responsive: [
{
breakpoint: 600,
settings: "unslick"
},
{
breakpoint: 769,
settings: {
arrows: false,
slidesToShow: 4,
slidesToScroll: 1
}
}
]
});
});
it's showing some second like this after reloading page
enter image description here
then it's showing right after some second like this
enter image description here

The document ready function executes when the DOM (Document Object Model) is completely loaded in the browser.
Remove this code ** $(document).ready(function() **
$('.template-blog .mobile-tag-slider').slick({
dots: false,
infinite: true,
arrows: false,
slidesToShow: 4,
slidesToScroll: 1,
centerMode: true,
centerPadding: '90px',
mobileFirst: true,
responsive: [
{
breakpoint: 600,
settings: "unslick"
},
{
breakpoint: 769,
settings: {
arrows: false,
slidesToShow: 4,
slidesToScroll: 1
}
}
]
});

Slick slider onclick doesn't work when reaching breakpoints

Currently, I'm having an issue with Slick. The button onlick doesn't work (it's not redirecting the page) when I resize the screen down to where the slideshow crosses another breakpoint. Can you please give me suggestion for this?
Below is my code:
This is my html
<div class="cmp-carousel__content slider responsive">
<button class="cmp-carousel__content-button" >Testing
</button>
<button class="cmp-carousel__content-button" >Testing
</button>
<button class="cmp-carousel__content-button" >Testing
</button>
</div>
This is my js
$('.responsive').slick({
infinite: false,
slidesToShow:2,
slidesToScroll:2,
dots: true,
arrows: true,
responsive: [
{
breakpoint: 1110,
settings: {
slidesToShow: 1.5,
slidesToScroll: 1,
infinite: false,
dots: true,
arrows: true,
}
},
{
breakpoint: 800,
settings: {
slidesToShow: 1.3,
slidesToScroll: 1,
infinite: false,
variableWidth: false,
dots: true,
arrows: true,
}
},
{
breakpoint: 700,
settings: {
slidesToShow: 1.2,
slidesToScroll: 1,
infinite: false,
variableWidth: false,
dots: true,
arrows: true,
}
},
]
});
Thank you.

TinyMce - How to set editor height below 50px when using autoresize pluggin

How can I set tinymce editor height to 36px, when I set this the iframe height becomes 67px. If I set height above 100 it works fine. I need the editor to auto resize with typing or paste
My code is like this:
tinymce.init({
selector: "textarea,
plugins: ["paste autoresize"],
height : '40px',
icon: false, menubar: false, statusbar: false, toolbar: false, autoresize_bottom_margin: 10, object_resizing: false,
paste_as_text: true, force_br_newlines: true,autoresize_max_height : "300px",
});

I got it working by setting the init options like
tinymce.init({
selector: "textarea,
plugins: ["paste autoresize"],
autoresize_bottom_margin: 2,
autoresize_min_height: 36,
autoresize_max_height: 300,
icon: false, menubar: false, statusbar: false, toolbar: false, autoresize_bottom_margin: 10, object_resizing: false,
paste_as_text: true, force_br_newlines: true,
});

you can use min_height configuration setting.
In your case the code should be:
tinymce.init({
selector: "textarea",
plugins: ["paste autoresize"],
min_height: 10,
height : 30,
icon: false,
menubar: false,
statusbar: false,
toolbar: false,
autoresize_bottom_margin: 10,
object_resizing: false,
paste_as_text: true,
force_br_newlines: true,
autoresize_max_height : "300px"
});
as you said, with autoresize plugin it does not work. maybe this is a problem of autoresize plugin. anyway there is another option autoresize_min_height : 30 which I tested but as it seems this does not work either.