Jump to content
Omar~

Ajuda a melhorar o slide Carrousel

Recommended Posts

Beleza?!

Então criei um carrousel com jquery que ficou até bacana, porém preciso fazer umas melhorias nele. Basicamente é aplicar responsivo a ele.

E por enquanto o código tá assim todo bagunçado, depois dou uma enxugada, e passar tudo para uma função para comandar suas ações por parâmetro, assim evitando ter que editar o código caso queira um comportamento diferente.

 

Então quem puder ajudar em deixar-lo responsivo fico grato.

O que falta e é mais prioridade é: Automatização do responsivo de forma a não necessidade de ficar fazendo edições tanto no css quanto na função, quando for usar em diferentes ocasiões.

Segue-se então

 

HTML:

Spoiler

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Teste Carousel</title>
    </head>
    <body>
        <div class="slide-container">
            <div class="nav prev"><button>&#10094;</button></div>
            <ul class="slider">
                <li style="background: red"></li>
                <li style="background: green"></li>
                <li style="background: blue"></li>
            </ul>
            <div class="nav next"><button>&#10095;</button></div>
        </div>
    </body>
</html>

 

 

CSS:

Spoiler

* {
    margin: 0;
    padding: 0
}
html, body {height: 100%}
img {max-width: 100%}
.slide-container {
    width: 100%;
    position: relative;
    margin: 0 auto;
    overflow: hidden
}
.slider {
    list-style: none;
    width: 1000%;
}
.slider li {
    float: left;
    min-height: 300px;
    margin: 0;
    padding: 0;
    position: relative;
}
.slide-container .nav {
    display: table;
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -48px;
    z-index: 1
}
.slide-container .nav button {
    background: none;
    border: none;
    font-size: 48px;
    color: #ffffff;
    padding: 16px;
    display: table-cell;
    vertical-align: middle;
    cursor: pointer
}
.slide-container .nav:hover button {
    color: white;
    background-color: rgba(0,0,0,.5);
}
.slide-container .nav.prev {
    left: 0;
}
.slide-container .nav.next {
    right: 0;
}

 

 

Script:

Spoiler

$(function () {
    // Define o tamanho do slide conforme o tamanho da janela
    $('.slider li').css({'width': parseInt($('.slide-container').outerWidth()) + 'px'});

    var slideContainer, // @var janela usada mais tarde para tratar de responsivo
    slideCount = 0, // Captura qual é o avanço atual do slide
    slideSize = parseInt($('.slider li').outerWidth()), // Captura o tamando de cada item do slide
    slideTotalSize = slideSize * slideSize, // Calcula o tamanho total de cada item do slide
    slideQuant = ($('.slider li').length / 1) - 1; // Calcula quantos itens exitem no slide

    // Ajusta o Slide
    $('.slider').css({'width': slideTotalSize});

    $('.next').click(function () {
        if (slideCount < slideQuant) {
            slideCount++;
            $('.slider').animate({'margin-left': '-=' + slideSize + 'px'}, 500);
        } else {
            slideCount = 0;
            $('.slider').animate({'margin-left': '0'}, 500);
        }
        window.clearTimeout(slideTime);
        autoSlide();
    });
    $('.prev').click(function () {
        if (slideCount >= 1) {
            slideCount--;
            $('.slider').animate({'margin-left': '+=' + slideSize + 'px'}, 500);
        }
        window.clearTimeout(slideTime);
        autoSlide();
    });
    // Rebase dos slides para aplicar responsivo
    $(window).resize(function () {
        slideContainer = parseInt($('.slide-container').outerWidth());
        $('.slider li').css({'width': slideContainer + 'px'});
        $('.slider').css({'margin-left': '0'});
        slideSize = slideContainer;
        slideCount = 0;
    });

    // Arrastar itens do Slide
    var mouseStart, slideMouseMove, slideWindow, slideDrag;
    $('.slider').on('mousedown touchstart', function (e) {
        mouseStart = e.pageX || e.originalEvent.touches[0].pageX;
        slideWindow = parseInt($(window).width());
        slideDrag = 0;

        $('.slider').on('mousemove touchmove', function (e) {
            slideMouseMove = e.pageX || e.originalEvent.touches[0].pageX;
            slideDrag = (mouseStart - slideMouseMove) / slideWindow * 50;
        });
    });
    $('.slider').on('mouseup touchend', function () {
        $(document).off('mousemove touchmove');
        if (slideDrag < 1) {
            $('.prev').click();
        }
        if (slideDrag > 1) {
            if (slideCount < slideQuant) {
                $('.next').click();
            }
        }
    });

    function autoSlide() {
        slideTime = setTimeout(function () {
            $(".next").click();
        }, 3000);
    }
    autoSlide();
});

 

 

Lembrando que precisa da biblioteca jquery e está funcional, apesar de ser só o rascunho do que será, só falta mesmo automatizar o responsivo.

Share this post


Link to post
Share on other sites

Se quiser fechem...

Conseguir usando javascript puro. Sei lá jQuery é muito bugado, ou não conseguir aplicar a lógica altura relativa a largura, o que em js funcionou a mesma lógica com jquery não funcionou.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By ViniciusRamoa
      Olá, estou criando um projeto no laravel e estou com um problema na parte de css, criei um slide "arrastavel" para ser exibida algumas imagens, mas a borda entre uma imagem e outra está grande demais
       
      Imagem de como está:
       
       
       
      Imagem de como deveria ser o tamanho do espaço entre as imagens:

       
      Código pag.blade.php:
      @section('hotmanga') @if (count($hotMangaList)>0) <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale-1, maximum-scale=1"> <link rel="stylesheet" type="text/css" href="swiper.min.css"> <link rel="stylesheet" type="text/css" href="swiper.min.css"> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> @foreach ($hotMangaList as $manga) <div class="swiper-slide"> <li> <div class="imgBx" style="position: relative; z-index: 10; background: rgb(255, 255, 255) none repeat scroll 0% 0%;"> <img src='{{HelperController::coverUrl("$manga->manga_slug/cover/cover_250x350.jpg")}}' alt='{{ $manga->manga_name }}' /> <div class="well"> <p> <i class="fa fa-book"></i> {{ "#".$manga->chapter_number." ".$manga->chapter_name }} </p> </div> </div> </li> </div> @endforeach </div> </div> <!-- divisão --> <script type="text/javascript" src="swiper.min.js"></script> <script> var swiper = new Swiper('.swiper-container', { effect: 'coverflow', grabCursor: true, centeredSlides: true, slidesPerView: 'auto', coverflowEffect: { rotate: 7, stretch: 0, depth: 100, modifier: 1, slideShadows : true, }, pagination: { el: '.swiper-pagination', }, }); </script> </body> </html> @endif @stop  
      Código CSS do slide:
      .swiper-container { width: 250px; height: 350px; padding-top: 20px; padding-bottom: 50px; position: left; } .swiper-slide { background-position: center; background-size: cover; width: 250px; height: 350px; background: #2e7ab9; } .swiper-slide .imgBx { width: 250px; height: 350px; overflow: hidden; } .swiper-slide .imgBx img { width: 250px; height: 350px; } .swiper-slide .details { box-sizing: border-box; }  
      Código "limpo" onde o slide funciona normalmente:
      <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale-1, maximum-scale=1"> <link rel="stylesheet" type="text/css" href="swiper.min.css"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="imgBx"> <img src="https://img.freepik.com/vetores-gratis/imagens-animadas-abstratas-neon-lines_23-2148344065.jpg?size=626&ext=jpg"> </div> </div> <div class="swiper-slide"> <div class="imgBx"> <img src="https://img.freepik.com/vetores-gratis/imagens-animadas-abstratas-neon-lines_23-2148344065.jpg?size=626&ext=jpg"> </div> </div> </div> <!-- divisão --> </div> <div class="swiper-pagination"></div> </div> <script type="text/javascript" src="swiper.min.js"></script> <script> var swiper = new Swiper('.swiper-container', { effect: 'coverflow', grabCursor: true, centeredSlides: true, slidesPerView: 'auto', coverflowEffect: { rotate: 7, stretch: 0, depth: 100, modifier: 1, slideShadows: true, }, pagination: { el: '.swiper-pagination', }, }); </script> </body> </html>  
       
      Obrigado pelo seu tempo e ajuda
    • By s3c0
      Olá amigos,
       
      estou tentando fazer um slide com JQUERY de troca de DIV, porém não estou conseguindo sem uso de plugins.
       
      A ideia seria a hora que abrir o modal, mostrar as "Colunas" 1 e 2, e com o tempo mudar para 3 e 4 em loop infinito.
      Coloquei 2 "botões" somente para ir testando o código, porém não consegui realizar o slide corretamente.
       
      Alguém teria alguma sugestão?
       
      <div class="modal_banner"> <a class="fechar_modal" onclick="javascript:close_modal_banner();"><svg aria-hidden="true" focusable="false" data-prefix="fas" id="btn_modal" width="30" data-icon="times-circle" class="svg-inline--fa fa-times-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"></path></svg></a> <div class="topo_modal"> <span id="logo_modal"><img src="logo.png" width="150px"></span> <span id="texto_topo"><p>texto</p><span></div> <div style="top: 50%;left: -20px;-ms-transform: translate(-0%, -50%);transform: translate(-0%, -50%);position: absolute;"><a style="cursor:pointer;" id="seguinte" onclick="esquerda();"><svg width="30px" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-left" class="svg-inline--fa fa-chevron-left fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"></path></svg></a></div> <div class="corpo_modal_banner"> <div class="product-item"> <div class="products-row" style=""> <div class="coluna" >1</div> </div> <div class="products-row" style=""> <div class="coluna" >2</div> </div> <div class="products-row" style=""> <div class="coluna">3</div> </div> <div class="products-row" style=""> <div class="coluna">4</div> </div> <div style="top: 50%;right: -20px;-ms-transform: translate(-0%, -50%);transform: translate(-0%, -50%);position: absolute;"><a style="cursor:pointer;" id="anterior" onclick="direita();"><svg width="30px" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" class="svg-inline--fa fa-chevron-right fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path></svg></a></div> </div> </div> </div> function esquerda(){ $('.products-row').hide("slide", { direction: "left" }, 500); }; function direita(){ $('.products-row').hide("slide", { direction: "right" }, 500); };  
      Agradeço a atenção de todos!
    • By shacapell
      Olá pessoal!
      Entendo um pouco de html e tenho um blog em xml, então preciso da ajuda de vocês.
      Eu queria tirar essa função de slide de posts e colocar uma imagem de fundo do mesmo tamanho e um texto com link por cima. Vejam > www.babadeanimais.net
       
      Outra coisinha, nos posts e páginas está configurado para a primeira imagem ficar no topo ocupando todo o espaço. Queria tirar isso, mas nem sei onde está no código.
       
      #main-slider .slick-prev,.main-gallery .slick-prev,#main-slider .slick-next,.main-gallery .slick-next,.related-stuff .slick-prev,.related-stuff .slick-next{font-size:25px;color:#000;display:block;text-align:center;background:#fff;outline:0;padding:0;width:35px;height:50px;position:absolute;top:50%;margin-top:-15px;cursor:pointer;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease} button.slick-nav.slick-prev i{color:#252525} button.slick-nav.slick-next i{color:#252525} span.feat-cat a{color:#FFF;padding:5px 15px;background-color:$(theme.sec.color);border-radius:40px} h2.feat-title a{color:#252525} .feat-readmore a{color:#FFF;padding:6px 10px;background-color:$(theme.color);box-shadow:3px 3px 0 0 $(theme.sec.color)} .feat-readmore a:hover{box-shadow:none} .related-stuff .slick-prev,.related-stuff .slick-next{top:30%} #main-slider .slick-prev{left:200px} .main-gallery .slick-prev,.related-stuff .slick-prev{left:-40px} .main-gallery .slick-next,.related-stuff .slick-next{right:-40px} .main-gallery:hover .slick-prev,.related-stuff:hover .slick-prev{left:0} .main-gallery:hover .slick-next,.related-stuff:hover .slick-next{right:0} .slick-prev:before,.slick-next:before{content:''} #main-slider .slick-next{right:200px} .item{position:relative} #section-featured{position:relative;min-height:50px;width:100%} #main-slider div img{max-width:100%;height:490px;object-fit:cover;width:100%} #main-slider div span.title{font-size:19px;color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:25px;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s} div#main-slider{width:100%;overflow:hidden} div#bt-slider-main .title{display:none} .feat-wrapper{position:absolute;left:10px;bottom:120px;right:10px;padding:20px;width:60%;margin:0 auto} .feat-wrapper-inner{position:relative;height:100%;z-index:99;width:100%;display:table;padding:40px;vertical-align:middle;text-align:center;border-top:0;background:#fff;color:#fff;-webkit-box-shadow:9px 9px 0 0 #F1F1F1;-moz-box-shadow:9px 9px 0 0 #F1F1F1;box-shadow:9px 9px 0 0 #F1F1F1} .feat--inner{vertical-align:middle;display:table-cell} .feat-header{margin-bottom:0;padding:0 20px} .feat-cat:before{content:'';display:inline-block;height:2px;width:40px;background:#A2A2A2;margin-bottom:5px;margin-right:0} .feat-cat:after{content:'';display:inline-block;height:2px;width:40px;background:#A2A2A2;margin-bottom:5px;margin-left:0} span.feat-cat{font-size:12px;letter-spacing:1px;padding-bottom:2px;display:inline-block;margin:0 0 10px 5px;font-weight:400;text-transform:uppercase} .slick-slide{opacity:1;transition:.2s} .item.slick-slide.slick-active.slick-center{opacity:1;transition:.2s} .slick-slider{position:relative;display:block;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent} .slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0} .slick-list:focus{outline:none} .slick-list.dragging{cursor:pointer;cursor:hand} .slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} .slick-track{position:relative;top:0;left:0;display:block} .slick-track:before,.slick-track:after{display:table;content:''} .slick-track:after{clear:both} .slick-loading .slick-track{visibility:hidden} .slick-slide{display:none;float:left;height:100%;min-height:1px} [dir='rtl'] .slick-slide{float:right} .slick-slide img{display:block} .slick-slide.slick-loading img{display:none} .slick-slide.dragging img{pointer-events:none} .slick-initialized .slick-slide{display:block} .slick-loading .slick-slide{visibility:hidden} .slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent} .slick-prev,.slick-next{font-size:0;line-height:0;position:absolute;top:50%;display:block;width:20px;height:20px;margin-top:-10px;padding:0;cursor:pointer;color:transparent;border:none;outline:none;background:transparent} .slick-prev:hover,.slick-prev:focus,.slick-next:hover,.slick-next:focus{color:transparent;outline:none;background:transparent} .slick-prev:hover:before,.slick-prev:focus:before,.slick-next:hover:before,.slick-next:focus:before{opacity:1} .slick-prev.slick-disabled:before,.slick-next.slick-disabled:before{opacity:.25} .slick-prev:before,.slick-next:before{font-family:'slick';font-size:20px;line-height:1;opacity:.75;color:#252525;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} .slick-prev{left:-25px} [dir='rtl'] .slick-prev{right:-25px;left:auto} .slick-next{right:-25px} [dir='rtl'] .slick-next{right:auto;left:-25px} .slick-slider{margin-bottom:30px} .slick-dots{text-align:center} .slick-dots li{position:relative;display:inline-block;width:20px;height:20px;margin:0 8px;padding:0;cursor:pointer} .slick-dots li button{font-size:0;line-height:0;display:block;width:20px;height:20px;padding:5px;cursor:pointer;color:transparent;border:0;outline:none;background:transparent} .slick-dots li button:hover,.slick-dots li button:focus{outline:none} .slick-dots li button:hover:before,.slick-dots li button:focus:before{opacity:1;background-color:$(theme.color)} .slick-dots li button:before{position:absolute;top:0;display:block;left:0;content:'';text-align:center;opacity:.35;height:5px;width:22px;background-color:#656464;margin-top:5px;transition:.2s;border-radius:50px} .slick-dots li.slick-active button:before{opacity:.75;background-color:$(theme.color)} @media only screen and (max-width:767px) and (min-width:480px) { #main-slider .slick-prev,.main-gallery .slick-prev,.related-stuff .slick-prev{left:0} #main-slider .slick-next,.main-gallery .slick-next,.related-stuff .slick-next{right:0} #main-slider div img{height:350px} .feat-wrapper{bottom:15px;padding:10px;width:430px} h2.feat-title{line-height:32px;font-size:23px} .thumbnail{margin:0 auto} .item.slick-slide:before{opacity:1;background:0 0} } @media only screen and (max-width:479px) { .fixedheader .grid,span.feat-cat{display:none} .header img,.thumbnail{margin:0 auto} #main-slider .slick-next{right:0} #main-slider .slick-prev{left:0} #main-slider div img{height:275px} .gal4 img{height:250px} .feat-readmore{width:135px} img.thumb-single{max-height:300px} h2.feat-title{line-height:32px;font-size:23px} .feat-wrapper{bottom:15px;padding:5px;width:94%} } .large-12.column{text-align:center} @-webkit-keyframes justified-gallery-show-caption-animation { from{opacity:0} to{opacity:.7} } @-moz-keyframes justified-gallery-show-caption-animation { from{opacity:0} to{opacity:.7} } @-o-keyframes justified-gallery-show-caption-animation { from{opacity:0} to{opacity:.7} } @keyframes justified-gallery-show-caption-animation { from{opacity:0} to{opacity:.7} } @-webkit-keyframes justified-gallery-show-entry-animation { from{opacity:0} to{opacity:1} } @-moz-keyframes justified-gallery-show-entry-animation { from{opacity:0} to{opacity:1} } @-o-keyframes justified-gallery-show-entry-animation { from{opacity:0} to{opacity:1} } @keyframes justified-gallery-show-entry-animation { from{opacity:0} to{opacity:1} } .justified-gallery{width:100%;position:relative;overflow:hidden;margin-bottom:30px} .justified-gallery&gt;a,.justified-gallery&gt;div{position:absolute;display:inline-block;overflow:hidden;opacity:0;filter:alpha(opacity=0)} .justified-gallery&gt;a&gt;a&gt;img,.justified-gallery&gt;a&gt;img,.justified-gallery&gt;div&gt;a&gt;img,.justified-gallery&gt;div&gt;img{position:absolute;top:50%;left:50%;margin:0;padding:0;border:0} .justified-gallery&gt;a&gt;.caption,.justified-gallery&gt;div&gt;.caption{display:none;position:absolute;bottom:0;padding:5px;background-color:#000;left:0;right:0;margin:0;color:#fff;font-size:12px;font-weight:300;font-family:sans-serif} .justified-gallery&gt;a&gt;.caption.caption-visible,.justified-gallery&gt;div&gt;.caption.caption-visible{display:initial;opacity:.7;filter:&quot;-webkit-animation:justified-gallery-show-caption-animation 500ms 0 ease;-moz-animation:justified-gallery-show-caption-animation 500ms 0 ease;-ms-animation:justified-gallery-show-caption-animation 500ms 0 ease} .justified-gallery&gt;.entry-visible{opacity:1;filter:alpha(opacity=100);-webkit-animation:justified-gallery-show-entry-animation 500ms 0 ease;-moz-animation:justified-gallery-show-entry-animation 500ms 0 ease;-ms-animation:justified-gallery-show-entry-animation 500ms 0 ease} .justified-gallery&gt;.spinner{position:absolute;bottom:0;margin-left:-24px;padding:10px 0;left:50%;opacity:initial;filter:initial;overflow:initial} .justified-gallery&gt;.spinner&gt;span{display:inline-block;opacity:0;filter:alpha(opacity=0);width:8px;height:8px;margin:0 4px;background-color:#000;border-radius:6px} ]]></b:skin>  
    • By isaque_cb2
      Olá galera, eu estou trabalhando em um site pessoal, mais para aprendizado mesmo, mas me deparei com um erro, quando eu abro o site no navegador (PC) funciona normal, mas quando abro no celular, a imagem dica pequena e no topo, alguém pode me ajudar com isso?
      print 1: (modo mobile do inspecionar)

      no PC fica normal, repare a área cinza abaixo da imagem, toda essa área devia ser coberta pela imagem, grato!
      http://prntscr.com/mvj3ed
       
      Grato desde já!
    • By reinaldorti
      Olá meus amigos, estou com um problema em um slide onde ele ta repedindo o conteúdo nos 4 blocos..
      Gostaria de uma ajuda pois quando eu faço ele ficar certinho o slide não passa, mais quando eu faço o slide passar ele fica com os blocos repetido..
      Alguém poderia me dar alguma dica para me ajudar nisso...
       
      Obrigado!

       
      <div id="news-slider" class="owl-carousel"> <?php $RedCat = new Read; $RedCat->fullRead( "SELECT DISTINCT " . "p.post_id," . "p.post_name," . "p.post_title," . "p.post_cover," . "p.post_category," . "p.post_status," . "c.category_id," . "c.category_parent," . "c.category_name," . "c.category_title," . "c.category_content," . "c.category_date," . "c.category_color " . "FROM " . DB_POSTS . " p " . "INNER JOIN " . DB_CATEGORIES . " c ON c.category_id = p.post_category " . "WHERE p.post_status = :status AND c.category_parent IS NULL GROUP BY p.post_category ORDER BY RAND()", "status=1" ); if ($RedCat->getResult()): foreach ($RedCat->getResult() as $Post): $Post['post_cover'] = (file_exists("uploads/{$Post['post_cover']}") && !is_dir("uploads/{$Post['post_cover']}") ? "uploads/{$Post['post_cover']}" : 'admin/_img/no_image.jpg'); $Post['category_color'] = (!empty($Post['category_color']) ? "style='background-color:{$Post['category_color']}'" : ''); ?> <div class="news-slide"> <?php $Indice = array('first', 'second', 'third', 'fourth'); foreach ($Indice as $class): $Cover = ($class == 'first' ? "w=573&h=442" : ($class == 'second' ? "w=274&h=442" : ($class == 'third' ? "w=374&h=215" : ($class == 'fourth' ? "w=374&h=215" : '')))); ?> <div class="news-slider-layer <?= $class; ?>"> <a href="<?= BASE; ?>/" title=""> <div class="content"> <span class="category-tag" <?= $Post['category_color']; ?>><?= $Post['category_title']; ?></span> <p><?= $class; ?></p> </div> <img src="<?= BASE; ?>/tim.php?src=<?= $Post['post_cover']; ?>&<?= $Cover; ?>" title="<?= $Post['post_title']; ?>" alt="<?= $Post['post_title']; ?>"> </a> </div> <?php endforeach; ?> </div> <?php endforeach; endif; ?> </div>  

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.