Jump to content

Search the Community

Showing results for tags 'slide'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Web Development
    • HTML e CSS
    • Javascript
    • PHP
    • Ruby
    • Python
    • Java
    • .NET
    • Docker, Kubernets and other environments
    • WordPress
    • Mobile
    • Agile
    • Desenvolvimento de Games
    • Banco de Dados
    • Design and UX
    • Algoritmos & Outras Tecnologias
  • Entretenimento e uso pessoal
    • Segurança & Malwares
    • Geral
    • iMasters's pub

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Found 14 results

  1. ViniciusRamoa

    Slide CSS com margem grande

    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
  2. 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!
  3. shacapell

    XML de slide

    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>
  4. reinaldorti

    slide repetindo o conteúdo

    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>
  5. Olá pessoal. Preciso de ajuda novamente a algum tempo vendo uns videos no Youtube encontrei um video onde ensinava como deixa a imagens dos slide com tamanho único, onde o mesmo código eu adicionava no código CSS. Estou usando o tema colorMag, o mesmo tem um slide logo no topo do site so que quando mando uma imagens que nao tem o tamanha 800x445px a imagens faz com que o site fica dançando. Alguém pode me ajudar.
  6. Bom dia pessoal, sou novo no Imasters e na parte de desenvolvimento em geral e estou com uma dúvida bem simples, não julguem kkk Criei esse slider descrito logo abaixo e não consigo fazer a troca de imagens automática. Por exemplo, a cada 3 segundos a imagem fazer um fade out e entrar outra com fade in básico, ou mesmo deslizar pro lado. A animação não tem tanta importancia. O que queria mesmo era fazer com que funcione o código pra automatizar a troca de imagens. Alguem poderia por favor me dar uma luz? Tentei algumas coisas aqui mas não consegui :/ Segue o slider: <div class="div-slider"> <ul class="slides-front"> <input type="radio" name="radio-btn" id="img-1" checked=""> <li class="slide-container"> <div class="slide"> <img src="http://10.0.2.220/draftfile.php/961/user/draft/587036133/slider-front-1.png"> </div> <div class="nav"> <label for="img-3" class="prev">‹</label> <label for="img-2" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-2"> <li class="slide-container"> <div class="slide"> <img src="http://10.0.2.220/draftfile.php/961/user/draft/587036133/slider-front-2.png"> </div> <div class="nav"> <label for="img-1" class="prev">‹</label> <label for="img-3" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-3"> <li class="slide-container"> <div class="slide"> <img src="http://10.0.2.220/draftfile.php/961/user/draft/587036133/slider-front-3.png"> </div> <div class="nav"> <label for="img-2" class="prev">‹</label> <label for="img-1" class="next">›</label> </div> </li> <li class="nav-dots"> <label for="img-1" class="nav-dot" id="img-dot-1"></label> <label for="img-2" class="nav-dot" id="img-dot-2"></label> <label for="img-3" class="nav-dot" id="img-dot-3"></label> </li> </ul> </div> E o CSS do mesmo: /*------------------- SLIDER FRONT PAGE - NOVIDADES ----------------------*/ @import url(https://fonts.googleapis.com/css?family=Varela+Round); .div-slider{ width: auto; height: 400px; text-align: center; } .slides-front { padding: 0; width: 980px; height: 370px; display: block; margin: auto; position: relative; } .slides-front * { user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .slides-front input { display: none; } .slide-container { display: block; } .slide { top: 0; opacity: 0; width: 980px; height: 370px; display: block; position: absolute; transform: scale(0); transition: all .7s ease-in-out 0.1s; } .slide img { width: 100%; height: 100%; } .nav label { width: 150px; height: 100%; display: none; position: absolute; opacity: 0; z-index: 9; cursor: pointer; transition: opacity .2s; color: #FFF; font-size: 156pt; text-align: center; line-height: 380px; font-family: "Varela Round", sans-serif; background-color: rgba(255, 255, 255, .3); text-shadow: 0px 0px 15px rgb(119, 119, 119); } .slide:hover + .nav label { opacity: 0.5; } .nav label:hover { opacity: 1; } .nav .next { right: 0; } input:checked + .slide-container .slide { opacity: 1; transform: scale(1); transition: opacity 1s ease-in-out 0.1s; } input:checked + .slide-container .nav label { display: block; } .nav-dots { width: 100%; bottom: 9px; height: 11px; display: block; position: relative; text-align: center; } .nav-dots .nav-dot { top: 375px; width: 11px; height: 11px; margin: 0 4px; position: relative; border-radius: 100%; display: inline-block; background-color: rgba(0, 0, 0, 0.6); } .nav-dots .nav-dot:hover { cursor: pointer; background-color: rgba(0, 0, 0, 0.8); } input#img-1:checked ~ .nav-dots label#img-dot-1, input#img-2:checked ~ .nav-dots label#img-dot-2, input#img-3:checked ~ .nav-dots label#img-dot-3, { background: rgba(0, 0, 0, 0.8); } Acho que é isso (: Qualquer ajuda é bem vinda. Valeeeeu
  7. ZuptInformática

    Slide não passa automaticamente

    Prezados amigos, boa tarde! Estou com um erro que não estou conseguindo resolver, no slide show do site, o primeiro slide não passa automaticamente, só seu clico com o mouse, depois disso ele continua automaticamente: Este é o código jquery: jQuery(document).ready(function () { $(".bullet").click(); jQuery('.tp-banner').show().revolution( { dottedOverlay: "none", delay: 10000, startwidth: 1140, startheight: 560, hideThumbs: 200, thumbWidth: 100, thumbHeight: 50, thumbAmount: 5, navigationType: "bullet", navigationArrows: "none", touchenabled: "on", onHoverStop: "off", swipe_velocity: 0.7, swipe_min_touches: 1, swipe_max_touches: 1, drag_block_vertical: false, parallax: "mouse", parallaxBgFreeze: "on", parallaxLevels: [7, 4, 3, 2, 5, 4, 3, 2, 1, 0], keyboardNavigation: "off", navigationHAlign: "center", navigationVAlign: "bottom", navigationHOffset: 0, navigationVOffset: 40, shadow: 0, spinner: "spinner3", stopLoop: "off", stopAfterLoops: -0, stopAtSlide: -0, shuffle: "off", autoHeight: "off", forceFullWidth: "off", hideThumbsOnMobile: "off", hideNavDelayOnMobile: 1500, hideBulletsOnMobile: "off", hideArrowsOnMobile: "off", hideThumbsUnderResolution: 0, hideSliderAtLimit: 0, hideCaptionAtLimit: 0, hideAllCaptionAtLilmit: 0, startWithSlide: 0, fullScreenOffsetContainer: ".header" }); $(".bullet").click(); }); //ready Poderiam me ajudar por favor?
  8. Rzorr

    Owl_Carousel

    Fala pessoal Blz! Primeira vez que faço um slide com Owl_corousel e parece ser muito simples porém estou tentando implementa-lo em um projeto já existente. Acontece que até já consegui porém ele fica estático, só troca imagem, se clicar e arrastar para o lado e a imagem fica pequena, eu estava querendo ela grande tipo aqueles slides bonitos full-widht. meu código abaixo, os códigos que vieram na pasta do Owl não alterei.Vou tentar postar uma imagem de como está, se alguém puder me dar uma força. O projeto é meu mesmo. <?php session_start(); ?> <!doctype html> <html lang="pt-br"> <head> <!-- Required meta tags --> <meta charset="ISO-8859-1"> <link href='http://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="../app/css_public/node_modules/bootstrap/compiler/style.css" /> <link rel="stylesheet" href="../app/css_public/node_modules/bootstrap/compiler/bootstrap.css" crossorigin="anonymous"> <!-- Css OW --> <link rel="stylesheet" href="../app/css/public/OwlCarousel2-2.3.4/dist/assets/owl.carousel.min.css"> <link rel="stylesheet" href="../app/css/public/OwlCarousel2-2.3.4/dist/assets/owl.theme.default.min.css"> <!--<link rel="stylesheet" href="../app/css_public/css/style.css" type="text/css">--> <title>[config_site_description] - [config_site_title]</title> </head> <style> .top{background-color:#000; padding:10px;} .topinfo{background-color:#000;} .barra{background-color: #000;color:#fff;} /*--- menu superior */ nav .menu>li>a { display: block; padding: 0 25px; height: 74px; line-height: 74px; text-shadow: 1px 1px #fff; color: #172F51; text-transform: uppercase; text-decoration: none; font-family: 'Oswald',Arial,"Helvetica Neue",Helvetica,sans-serif; font-weight: 400; font-size: 16px; background: none; position: relative; } nav .menu > li > a:hover{background-color:#A40E0E;} nav .menu { margin: 0; padding: 0; position: absolute; top: 0; right: 0; } nav .menu { margin: 0; padding: 0; position: absolute; top: 0; right: 0; } ul, menu, dir { display: block; list-style-type: disc; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; -webkit-padding-start: 40px; } nav .menu>li { list-style-type: none; float: left; margin: 0 1px 0 0; } .cidade{background-color:aquamarine;padding:10px;} .val{ background-color: aqua; padding: 10px;font-style:italic; font-weight: bold;} .meio{background-color:#EEEEEE;} .footer{background-color:#000;} .card_item{padding:3px; font-size: 16px;} .init_card{margin-top:10px; margin-bottom:10px;} .item{background-color:#fff; margin-bottom: 15px;} .fin{border-top-left-radius:5px; border-top-right-radius: 5px; background-color: burlywood; padding:5px; width:auto;} .li_item{align-items: center;list-style-type: none;display: inline;padding: 5px;font-size:20px;} .thumb:hover{ -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); border:14px solid #CCC; } .footer_meio{padding:15px;} .scweb{background-color:#ccc; color:#fff; text-align: center;} .btn_addfav{border:none;background-color:#fff; cursor: pointer; color:#A81012;} .btn_addfav:hover{color:#0D5607;} .la_btn{border:1px solid #000;padding:10px 15px;margin-top:10px;} .containerr{z-index: 9999; position: relative;top:160px;} .tag_price{color:#0B1E35;font-weight:bold ;list-style: none; margin-left:5px; background-color:#fff; width:100px; padding-bottom: 10px;} </style> <body> <!--site total--> <!--header--> <div class="header"> <!-- barra top --> <div class="top"> <div class="container"> <div class="row barra"> <div class="col-sm-3">Creci</div> <div class="col-sm-3">email</div> <div class="col-sm-3">Telefone</div> <div class="col-sm-3"><div id="icon_favs_saves__" onclick="window.location.href ='[baseUri]/pagina/favoritos'"> <i class="fa fas-star"></i> &nbsp;Imóveis Favoritos <?php if (isset($_SESSION['fav_saves'])){ $n1 = count($_SESSION['fav_saves']); echo $n1; }else{ echo '0'; } ?> </div></div> </div> </div> </div><!-- end barra top --> <!-- nav menu --> <div class=""> <div class="container"> <div class="row"> <div class="col-sm-12"> <a href="#"><img src="../app/css_public/images/logo.png"/></a> <nav> <ul class="menu"> <li class="home"><a href="[baseUri]/">Home</a></li> <li class="home"><a href="">Vendas</a></li> <li class="home"><a href="">Aluguel</a></li> <li class="home"><a href="[baseUri]/pagina/contato/">Contato</a></li> <!-- <li class="home"><a href="">Blog</a></li> --> <li class="home"><a href="[baseUri]/mapa/">Imóveis no Mapa</a></li> </ul> </nav> </div> </div> </div> </div><!-- end menu--> <hr> <!--<div class="topinfo" style="color:#fff;"><h3 align="center">O seu novo Imóvel está aqui!! Use os campos de Busca avançados</h3></div>--> </div><!--fim header--> <div role="main" class="miolo"> <!-- search --> <section class="buscaAvancada" style="margin: 5px;"> <div class="container"> <div class="row"> <div class="form-group"> <form id="search" class="form panel-busca hidden" action="[baseUri]/index/buscaavancada/" method="post"> <div class="row"> <div class="col-xs-6 col-sm-2"> <select name="finalidade" id="finalidade" class="sel-custom form-control"> <option value="0">Transação...</option> <option value="1">Venda</option> <option value="2">Locação</option> <option value="4">Temporada</option> </select> </div> <div class="col-xs-6 col-sm-2"> <select name="tipo" id="tipo" class="sel-custom form-control"> <option value="0">Tipo...</option> <!--{loop:tpb}--> <!--{ <option value="tpb.tipo_id" name="tpb.tipo_url">tpb.tipo_title</option>}--> <!--{end:tpb}--> </select> </div> <div class="col-xs-6 col-sm-2"> <select name="cidade" id="cidade" class="sel-custom form-control"> <option value="0">Cidade...</option> <!--{loop:catb}--> <!--{ <option value="catb.categoria_id" name="catb.categoria_url">catb.categoria_title</option>}--> <!--{end:catb}--> </select> </div> <div class="col-xs-6 col-sm-2"> <select name="bairro" id="bairro" class="sel-custom form-control" disabled> <option value="0">Bairro...</option> </select> </div> <div class="col-xs-6 col-sm-2"> <select name="valormax" id="valormax" class="sel-custom form-control valor_venda"> <option value="0">Preço...</option> <option value="0">Indiferente</option> <option value="40000">até 40.000</option> <option value="50000">até 50.000</option> <option value="60000">até 60.000</option> <option value="70000">até 70.000</option> <option value="80000">até 80.000</option> <option value="90000">até 90.000</option> <option value="100000">até 100.000</option> <option value="150000">até 150.000</option> <option value="200000">até 200.000</option> <option value="300000">até 300.000</option> <option value="400000">até 400.000</option> <option value="500000">até 500.000</option> <option value="1000000">até 1 milhão </option> <option value="2000000">até 2 milhões</option> <option value="5000000">até 5 milhões</option> </select> </div> <div class="col-xs-6 col-sm-2"> <select name="dorms" id="dorms" class="sel-custom form-control"> <option value="0">Dormitórios</option> <option value="0">Indiferente</option> <option value="1">1 Dorms</option> <option value="2">2 Dorms</option> <option value="3">3 Dorms</option> <option value="4">4 Dorms</option> <option value="5">5 ou mais</option> </select> </div> </div> <br/> <div class="row"> <div class="col-xs-6 col-sm-2"><label>Suites</label> <select name="suites" id="suites" class="sel-custom form-control"> <option value="0">Quartos...</option> <option value="0">Indiferente</option> <option value="1">1 Suite</option> <option value="2">2 Suite</option> <option value="3">3 Suite</option> <option value="4">4 Suite</option> <option value="5">5 ou mais</option> </select> </div> <div class="col-xs-6 col-sm-2"> <div class="form-group"><label></label><label></label> <button type="submit" class="btn btn-block btn-primary" id="btn-busca">Pesquisar</button> </div> </div> </div> </form> </div> </div> </div> </section><!-- end search --> <hr> <section class="banner_top"> <div class="owl-carousel"> <!--{loop:sl}--> <!--{<div class="slide">}--> <!--{<a href="[baseUri]/imovel/sl.categoria_url/sl.sub_url/sl.item_id/"><div> </div>}--> <!--{<div class="containerr">}--> <!--{<div class="overlay">}--> <!--{<div class="info">}--> <!--{<div class="tag_price">sl.item_preco</div>}--> <!--{<h3>sl.categoria_title</h3>}--> <!--{<figure>sl.tipo_title</figure>}--> <!--{</div>}--> <!--{<hr>}--> <!--{</div>}--> <!--{</div>}--> <!--{<div class="figure_item"><img src="[baseUri]/thumb/sl.foto_url/1900/450/crop/" alt="" title="sl.tipo_title em sl.categoria_title"></div>}--> <!--{</a>}--> <!--{</div>}--> <!--{end:sl}--> </div> </section> <section class="meio"> <div class="container-fluid" style="background-color: #000; color: #fff; padding: 10px;"> <div class="container "> <div class="venda"> <h4 align="left"><i class="fas fa-search-plus"></i> Im&oacute;veis Destaque Venda</h4> </div> </div> </div> <div class="container init_card"> <div class="row"> <!--{loop:i}--> <!--{<div class="col-xs-6 col-sm-4">}--> <!--{<div class="item">}--> <!--{<div class="fin">i.tipo_title</div>}--> <!--{<a href="[baseUri]/imovel/i.categoria_url/i.sub_url/i.item_id/">}--> <!--{<div class="thumb"><img class="img-responsive" src="[baseUri]/thumb/i.foto_url/336/200/crop/" width="350" height="200" title="i.tipo_title em i.sub_title - i.categoria_title por i.item_preco"/></div>}--> <!--{</a>}--> <!--{<span class="info">}--> <!--{<span class="cidade">i.categoria_title</span>}--> <!--{<span class="val">R$ i.item_preco</span>}--> <!--{</span>}--> <!--{<div class="cat_item">}--> <!--{<ul>}--> <!--{<li class="li_item" title="Dormitórios"><i class="fas fa-bed"></i><span> i.item_dorm</span></li>}--> <!--{<li class="li_item" title="vagas"><i class="fas fa-car"></i><span> i.item_vaga</span></li>}--> <!--{<li class="li_item" title="Banheiros"><i class="fas fa-shower"></i><span> i.item_wc</span></li>}--> <!--{<li class="li_item" title="Área"><span>àrea i.item_area <sup>m²</sup></span></li>}--> <!--{</ul>}--> <!--{</div>}--> <!--{<hr>}--> <!--{<div class="">}--> <!--{<?php echo "<form method='POST'>"; echo "<input type='hidden' name='item_id_fav' value='[i.item_id]'>"; echo "<input type='hidden' name='add_tofav' value='carrinho'>"; ?>}--> <!--{<span></span><span>#i.item_ref <?php echo "<span><button type='submit' title='favoritos' value='Adicionar aos Favoritos' class='btn_addfav fas fa-star'></span>"; ?>}--> <!--{<?php echo "</form>"; if (!isset($_SESSION['fav_saves'])) { $_SESSION['fav_saves'] = array(); } if (isset($_POST['item_id_fav'])) { $iditem = $_POST['item_id_fav']; } if (isset($_POST['add_tofav']) && $_POST['add_tofav'] == 'carrinho') { if (!isset($_SESSION['fav_saves'][$iditem])) { $_SESSION['fav_saves'][$iditem] = 1; } } ?>}--> <!--{}--> <!--{</div>}--> <!--{</div>}--> <!--{</div>}--> <!--{end:i}--> </div> </div> <div class="container-fluid" style="background-color: #000; color: #fff; padding: 10px;"> <div class="container"> <div class="aluguel"> <h4 align="left"><i class="fas fa-search-plus"></i> Im&oacute;veis Destaque Aluguel</h4> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-sm-3"> <div class="item" style="width:292px;"> <div class="fin">Alugue</div> <div class="thumb"><img src="images/índice.jpg"/></div> <span class="info"> <span class="val">R$250.000,00</span> <span class="cidade">Cambori&uacute;</span> </span> </div> </div> <div class="col-sm-3"> <div class="item" style="width:292px;"> <div class="fin">Aluguel Temporada</div> <div class="thumb"><img src="images/índice.jpg"/></div> <span class="info"> <span class="val">R$250.000,00</span> <span class="cidade">Cambori&uacute;</span> </span> </div> </div> <div class="col-sm-3"> <div class="item" style="width:292px;"> <div class="fin">Venda</div> <div class="thumb"><img src="images/índice.jpg"/></div> <span class="info"> <span class="val">R$250.000,00</span> <span class="cidade">Cambori&uacute;</span> </span> </div> </div> <div class="col-sm-3"> <div class="item" style="width:292px;"> <div class="fin">Venda</div> <div class="thumb"><img src="images/índice.jpg"/></div> <span class="info"> <span class="val">R$250.000,00</span> <span class="cidade">Cambori&uacute;</span> </span> </div> </div> </div> </div> </section> </div><!-- end main --> <div class="footer"> <div class="container"> <div class="row footer_meio"> <div class="col-sm-4 col-md-4"> <h3>Next Im&oacute;veis</h3> <ul> <li><p><a href="http://localhost/com/pagina/sobre/">Sobre N&oacute;s</a></p></li> <li><p><a href="http://localhost/com/pagina/links/">Links &Uacute;teis</a></p></li> <li><p><a href="http://localhost/com/pagina/contato/">Fale Conosco</a></p></li> <li><p><a href="javascript:;" class="go-top">Voltar ao Topo</a></p></li> </ul> </div> <div class="col-sm-4 col-md-4"> <h3>Entre em Contato</h3> <ul> <li><p>(11) 0000-0000</p></li> <li><p>(11) 0000-00000</p></li> <li><p></p></li> <li><p>teste@seusite.com.br</p></li> </ul> </div> <div class="col-lg-4 col-md-4"> <h3>Onde Estamos</h3> <ul> <li><p><small>Avenida Brasil, N&ordm; 100, Centro - Praia Grande / SP </small></p></li> <li><p><a href="http://localhost/com/pagina/contato/">Exibir Mapa de nossa localiza&ccedil;&atilde;o</a></p></li> </ul> </div> </div> </div> </div><!-- end footer --> <div id="overlay"></div> <div class="scweb">Todos direitos reservados SC WEB IM&Oacute;VEIS Desemvolvido by Br7 Desenvolvimento Web</div><!-- end footer --> <script src="js/jquery/jquery-1.8.3.min.js" type="text/javascript"></script> <script src="js/jquery/bootstrap/bootstrap.min.js"></script> <script src="js/public/main.js" type="text/javascript"></script> <script src="../app/css/public/OwlCarousel2-2.3.4/dist/owl.carousel.min.js"></script> <!--[if gt IE 8]> <script type="text/javascript" src="assets/js/ie.js"></script> <![endif]--> <script> $(document).ready(function(){ $(".owl-carousel").owlCarousel(); }); </script> </body> </html>
  9. ZuptInformática

    Slide Java

    Prezados, bom dia! Tem um site que tem o codigo abaixo JAVA para passar os slides, porém o primeiro slide não passa, quando se clica no botão manualmente ele passa depois passa automaticamente normal, mas se não clicar a primeira vez ele não passa. alguém pode me dizer se tem algum problema com o codigo: <!-- Revolution slider --> <script type="text/javascript"> jQuery(document).ready(function () { $(".bullet").click(); jQuery('.tp-banner').show().revolution( { dottedOverlay: "none", delay: 10000, startwidth: 1140, startheight: 560, hideThumbs: 200, thumbWidth: 100, thumbHeight: 50, thumbAmount: 5, navigationType: "bullet", navigationArrows: "none", touchenabled: "on", onHoverStop: "off", swipe_velocity: 0.7, swipe_min_touches: 1, swipe_max_touches: 1, drag_block_vertical: false, parallax: "mouse", parallaxBgFreeze: "on", parallaxLevels: [7, 4, 3, 2, 5, 4, 3, 2, 1, 0], keyboardNavigation: "off", navigationHAlign: "center", navigationVAlign: "bottom", navigationHOffset: 0, navigationVOffset: 40, shadow: 0, spinner: "spinner3", stopLoop: "off", stopAfterLoops: -0, stopAtSlide: -0, shuffle: "off", autoHeight: "off", forceFullWidth: "off", hideThumbsOnMobile: "off", hideNavDelayOnMobile: 1500, hideBulletsOnMobile: "off", hideArrowsOnMobile: "off", hideThumbsUnderResolution: 0, hideSliderAtLimit: 0, hideCaptionAtLimit: 0, hideAllCaptionAtLilmit: 0, startWithSlide: 0, fullScreenOffsetContainer: ".header" }); $(".bullet").click(); }); //ready
  10. Luck_.

    Problema com slide

    Bom dia, bem galera eu sou um completo noob em Javascript e eu to quebrando a cabeça pra resolver esse problema.Estou fazendo um site pro meu pai e ele me enviou umas foto pra colocar em um slide até ai blz,a imagem fica toda desconfigurada e eu acho que o problema é a divisão do slide (O espaço pra cada imagem) porque cada imagem é grande e fica desconfigurado,resumindo eu só queria saber como tirar isso esse espaço,acho que eu não fui bem direto,não estou conseguindo upar as imagens...em fim o código é esse aqui quem poder ajudar... <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <body style="padding:0px; margin:0px; background-color:#fff;font-family:arial,helvetica,sans-serif,verdana,'Open Sans'"> <!-- #region Jssor Slider Begin --> <!-- Generator: Jssor Slider Maker --> <!-- Source: https://www.jssor.com --> <script src="js2/jssor.slider-26.9.0.min.js" type="text/javascript"></script> <script type="text/javascript"> jssor_1_slider_init = function() { var jssor_1_options = { $AutoPlay: 1, $Idle: 0, $SlideDuration: 5000, $SlideEasing: $Jease$.$Linear, $PauseOnHover: 4, $SlideWidth: 140, $Cols: 7, $Align: 0 }; var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options); /*#region responsive code begin*/ var MAX_WIDTH = 1980; function ScaleSlider() { var containerElement = jssor_1_slider.$Elmt.parentNode; var containerWidth = containerElement.clientWidth; if (containerWidth) { var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth); jssor_1_slider.$ScaleWidth(expectedWidth); } else { window.setTimeout(ScaleSlider, 30); } } ScaleSlider(); $Jssor$.$AddEvent(window, "load", ScaleSlider); $Jssor$.$AddEvent(window, "resize", ScaleSlider); $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider); /*#endregion responsive code end*/ }; </script> <style> /* jssor slider loading skin spin css */ .jssorl-009-spin img { animation-name: jssorl-009-spin; animation-duration: 1.6s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes jssorl-009-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style> <div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:980px;height:100px;overflow:hidden;visibility:hidden;"> <!-- Loading Screen --> <div data-u="loading" class="jssorl-009-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);"> <img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" src="img/spin.svg" /> </div> <div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:100px;overflow:hidden;"> <div data-p="30.00"> <img data-u="image" src="Imagens/3.png" /> </div> <div data-p="30.00"> <img data-u="image" src="Imagens/4.png" /> </div> <div data-p="30.00"> <img data-u="image" src="Imagens/5.png" /> </div> <div data-p="30.00"> <img data-u="image" src="Imagens/6.png" /> </div> <div data-p="30.00"> <img data-u="image" src="Imagens/7.png" /> </div> <div data-p="30.00"> <img data-u="image" src="Imagens/8.png" /> </div> <div data-p="30.00"> <img data-u="image" src="Imagens/9.png" /> </div> <div data-p="30.00"> <img data-u="image" src="Imagens/10.png" /> </div> <div data-p="30.00"> <img data-u="image" src="Imagens/11.png" /> </div> <div data-p="30.00"> <img data-u="image" src="Imagens/12.png" /> </div> </div> </div> <script type="text/javascript">jssor_1_slider_init();</script> <!-- #endregion Jssor Slider End --> </body> </html>
  11. 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: CSS: Script: Lembrando que precisa da biblioteca jquery e está funcional, apesar de ser só o rascunho do que será, só falta mesmo automatizar o responsivo.
  12. LucasDD

    [ajuda] slide Show

    Boa tarde galera, gostaria que alguém me desse uma dica de como fazer um slide igual do globoesporte que aparece 4 imagens ao mesmo tempo. Imagem: https://uploaddeimagens.com.br/imagens/slide-png--14 Obrigado
  13. Olá galera... Estamos desenvolvendo um sistema de aprendizagem. Preciso saber se tem como criar um editor de slide simples através de html e php, ou se tem algum site com banco de editor do tipo. Abraços
  14. Estou criando um slide em bootstrap e gostaria de saber faço para area do texto pegar a largura total do slide? coloquei em anexo a imagem do slide, é o mesmo da documentação pode percebe que a parte preta não pegou 100 da larura
×

Important Information

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