0
I wonder how I can fix this problem I am facing, the code below is working perfectly on the Wordpress platform, however the slide mode to which changes the settings depending on the device this presenting the following error.
Depending on the device if it is in the case of Mobile or Tablet, if the user changes the position of the device to the standing mode or lying down the slide show keeps the page loading settings in the position where the device was when loading the page.
You would be able to fix this so that the settings automatically change in the fields Dots, Infinite, self-play, autoplaySpeed, slidesToShow and slidesToScroll, if the device changes its screen position, with no need to update the page to update the slide settings in the screen resolution the user is in.
<?php
/*
* -------------------------------------------------------------------------------------
* @author: Doothemes
* @author URI: https://doothemes.com/
* @aopyright: (c) 2021 Doothemes. All rights reserved
* -------------------------------------------------------------------------------------
*
* @since 2.4.2
*
*/
// Compose data MODULE
$sldr = doo_is_true('tvmodcontrol','slider');
$auto = doo_is_true('tvmodcontrol','autopl');
$orde = dooplay_get_option('tvmodorderby','date');
$ordr = dooplay_get_option('tvmodorder','DESC');
$pitm = dooplay_get_option('tvitems','10');
$titl = dooplay_get_option('tvtitle','TV Shows');
$pmlk = get_post_type_archive_link('tvshows');
$totl = doo_total_count('tvshows');
// Modo de verificação de largura do site
$modoFullPage = dooplay_get_option('homefullwidth');
// Compose Query
$query = array(
'post_type' => array('tvshows'),
'showposts' => $pitm,
'orderby' => $orde,
'order' => $ordr
);
// End Data
?>
<div class="trending__product">
<!-- product__page__title -->
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8">
<div class="section-title">
<h4><?php echo $titl; ?></h4>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="btn__all">
<a href="<?php echo $pmlk; ?>" class="primary-btn"><?php _d('See all'); ?> os <?php echo $totl; ?> <span class="arrow_right"></span></a>
</div>
</div>
</div>
<!-- product__page__title -->
<!-- Configurações do modo CSS para modulo Episódio -->
<style type="text/css">
@media only screen and (min-width: 300px) {
.coluna-lg-autoAF {-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
.product__item__picAF {height: 385px;position: relative;border-radius: 5px;}
}
@media only screen and (min-width: 400px) {
.coluna-lg-autoAF {-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
.product__item__picAF {height: 455px;position: relative;border-radius: 5px;}
}
@media only screen and (min-width: 460px) {
.coluna-lg-autoAF {-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
.product__item__picAF {height: 285px;position: relative;border-radius: 5px;}
}
@media only screen and (min-width: 540px) {
.coluna-lg-autoAF {-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
.product__item__picAF {height: 345px;position: relative;border-radius: 5px;}
}
@media only screen and (min-width: 640px) {
.coluna-lg-autoAF {-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
.product__item__picAF {height: 325px;position: relative;border-radius: 5px;}
}
@media only screen and (min-width: 640px) {
.coluna-lg-autoAF {-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
.product__item__picAF {height: 325px;position: relative;border-radius: 5px;}
}
@media only screen and (min-width: 800px) {
.coluna-lg-autoAF {-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
.product__item__picAF {height: 305px;position: relative;border-radius: 5px;}
}
@media only screen and (min-width: 900px) {
.coluna-lg-autoAF {-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
.product__item__picAF {height: 425px;position: relative;border-radius: 5px;}
}
@media only screen and (min-width: 1024px) {
<?php
if ($modoFullPage and $sldr) {
echo '.coluna-lg-autoAF {-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
.product__item__picAF {height: 385px;position: relative;border-radius: 5px;}';
}
elseif ($modoFullPage) {
echo '.coluna-lg-autoAF {-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}
.product__item__picAF {height: 385px;position: relative;border-radius: 5px;}';
}
elseif ($sldr) {
echo '.coluna-lg-autoAF {-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
.product__item__picAF {height: 340px;Eposition: relative;border-radius: 5px;}';
}
else {
echo '.coluna-lg-autoAF {-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}
.product__item__picAF {height: 340px;position: relative;border-radius: 5px;}';
}
?>
}
</style>
<!-- Configurações do modo CSS para modulo Episódio -->
<script type="text/javascript">
mobile();
function mobile(){
const mql = window.matchMedia('screen and (min-width: 320px) and (max-width: 470px)');
checkMedia(mql);
mql.addListener(checkMedia);
function checkMedia(mql){
if(mql.matches){
// Adiciona as configurações de class caso o slide esteja ativo
const elemento = document.getElementById('elemento');
if (elemento.classList)
elemento.classList.add('imagem');
else
elemento.className += ' imagem';
// Modo de funcionamento do slide show ativado
$(".imagem").slick({
dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed:5000
});
}
}
}
tablet();
function tablet(){
const mql = window.matchMedia('screen and (min-width: 480px) and (max-width: 770px)');
checkMedia(mql);
mql.addListener(checkMedia);
function checkMedia(mql){
if(mql.matches){
// Adiciona as configurações de class caso o slide esteja ativo
const elemento = document.getElementById('elemento');
if (elemento.classList)
elemento.classList.add('imagem');
else
elemento.className += ' imagem';
// Modo de funcionamento do slide show ativado
$(".imagem").slick({
dots: true,
infinite: true,
slidesToShow: 2,
slidesToScroll: 2,
autoplay: true,
autoplaySpeed:5000
});
}
}
}
tablet2();
function tablet2(){
const mql = window.matchMedia('screen and (min-width: 780px) and (max-width: 890px)');
checkMedia(mql);
mql.addListener(checkMedia);
function checkMedia(mql){
if(mql.matches){
// Adiciona as configurações de class
const elemento = document.getElementById('elemento');
if (elemento.classList)
elemento.classList.add('imagem');
else
elemento.className += ' imagem';
// Modo de funcionamento do slide show ativado
$(".imagem").slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: true,
autoplaySpeed:5000
});
}
}
}
desktop();
function desktop(){
const mql = window.matchMedia('screen and (min-width: 992px)');
checkMedia(mql);
mql.addListener(checkMedia);
function checkMedia(mql){
// Adiciona as configurações de class caso o slide esteja ativo
const elemento = document.getElementById('elemento');
if (elemento.classList)
elemento.classList.add('imagem');
else
elemento.className += ' imagem';
// Modo de funcionamento do slide show ativado
$(".imagem").slick({
dots: true,
infinite: true,
slidesToShow: 4,
slidesToScroll: 4,
autoplay: true,
autoplaySpeed:5000
});
}
}
</script>
<div id="elemento">
<?php
//
//
// Modulo de layout dos series e filmes
query_posts($query); while(have_posts()){ the_post(); get_template_part('inc/parts/item'); } wp_reset_query();
// Modulo de layout dos series e filmes
//
//
?>
</div>
</div>
Someone would know me how to correct the code to accomplish what I need ?
– Luciebr