#slide box

Name: Slide Box

Debut: Super Mario 64

Just the other day I was on a jaunt to Jolly Roger Bay when it hit me: a wooden crate with a skull and crossbones painted on it! Ouch! And then it occurred to me: It had taken away an eighth of my health! And that’s when I realized: I needed to move out of the way so it didn’t hit me again!

Once I was out of its path, something dawned on me: The sun! I had played video games all night and so I went to bed and promptly fell asleep! I didn’t even know what this thing was called! I mean, we’ve all seen it. We all know it. But it’s not exactly an enemy... is it? It’s just kind of an obstacle, right? I took to the Super Mario Wiki page for Jolly Roger Bay to investigate, and lo and behold, there it was underneath the “Enemies” section. Slide Box, huh? Sure is a name! Its matter-of-fact nature makes a lot more sense when you realize it’s really just its internal name in the game’s files (SLIDE_BOX).

The real interesting thing is that the Super Mario Wiki only says Slide Box can take away 1/8th of Mario’s health. But I’m here to show you what they DON’T want you to know... What is Big Mario hiding from us, you ask...? SLIDE BOX CAN ALSO SQUASH YOU!!! Yes, it’s true... and here is the PROOF, from a source who bravely gave (one of) their life(s) to unveil this heinous conspiracy:

As you can see, it is possible for Slide Box to take away half of all of Mario’s health in about a second flat (no pun intended). This is, I believe, more DPS than any other enemy in the game. Now, as you can also see, it’s possible for the box to slide over Mario without damaging him at all! There’s clearly some jank going on here, as it’s also possible to jump on top of it and then suddenly find yourself squashed underneath it.

Use swipe-able slide boxes and tabs in Ionic Framework apps. Compatible with Android and iOS.

One of my Twitter followers recently asked me to do a tutorial on the topic of Ionic Framework slide boxes and tabs.  I’m always up for a challenge, so I decided to attempt to meet his requests.

In this article we are going to discuss creating an application that makes use of tabs, slide boxes, and cards.  The theme of the application will be cars, where two tabs will represent the interior and…

Booooooooooom, esse slide e tão simplesinho tão fofinho que eu me apaixonei quando eu vi ele <3, Ele e tipo E-X-C-L-U-S-I-V-O, não adianta procurar tutoriais dele por ai que você não vai achar por que ele e Inglês e você só consegue ele dando Money a pessoa .-. então vamos lá:

<PREVIEW DO SLIDE>

Reparem que a troca de slides e feita por aqueles quadradinhos discretos no canto (>>), enfim vamos começar adicionando o seguinte código antes de </head> :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" ></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" ></script> <script type="text/javascript" src="http://contamais.com.br/scripts/comum.js"></script> <script type="text/javascript" src="http://contamais.com.br/scripts/coin-slider.min.js"> </script> <script type="text/javascript" src="http://contamais.com.br/scripts/jquery.beforeafter.min.js"> </script> <script type="text/javascript" src="http://contamais.com.br/scripts/jquery.jcarousel.min.js"> </script> <script type="text/javascript" src="http://contamais.com.br/scripts/jquery.colorbox-min.js"></script> <script type="text/javascript" src="http://contamais.com.br/scripts/jquery.timers-1.2.min.js"></script> <script type="text/javascript" src="http://contamais.com.br/scripts/content-slider.js"></script> <script type="text/javascript" src="http://contamais.com.br/scripts/autocomplete.js"></script> <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#coin-slider').coinslider({ width: 617, height: 282, spw: 1, // squares per width sph: 1, // squares per height delay: 3000, // delay between images in ms sDelay: 30, // delay beetwen squares in ms opacity: 0.8, // opacity of title and navigation titleSpeed: 500, // speed of title appereance in ms effect: 'rain', // random, swirl, rain, straight navigation: 'buttons', // prev next and buttons links : true, // show images as links hoverPause: true // pause on hover }); }); </script>

Sugiro que não toque nesta parte pois e aonde se encontram todas as configurações e o efeito de troca de imagem. Agora você vai copiar o código a seguir que vai personalizar o nosso Slide e colocar no seu CSS (<style> e </style>):

/*** SLIDE POR IMPÉRIO DO HTM *****/ .block-slider {display: block;width: 617px;height: 282px;overflow: hidden;}

.block-slider .coin-slider { overflow: hidden; zoom: 1; position: relative; border-radius: 14px; position: relative; }

.block-slider .coin-slider a { text-decoration: none; outline: none; border: none; } .block-slider .cs-buttons { font-size: 0px; position: absolute !important; bottom:15px; left:550px !important; margin: 0 !important; z-index: 1500; } .block-slider .cs-buttons a { margin-left: 5px; height: 10px; width: 7px; float: left; background-color: #ffffff; text-indent: -1000px; } .block-slider .cs-buttons a.cs-active { background-color: #469583; } .block-slider .cs-title { position: absolute; left: 0; width: 580px; padding: 10px; font-size: 18px; font-weight: bold; color: #fff;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;text-transform:uppercase; bottom: 5px !important; line-height:14px; background-color: transparent; } .block-slider .cs-back-title{ position: absolute; width: 620px; height: 40px; bottom: 0; left: 0; margin: 0; z-index: 1000; background-color: #7dbfb0; } .block-slider .cs-prev, .block-slider .cs-next { display: none; } .block-tags li { display: inline; } .block-tags a.tag { color: #cc3399; text-decoration: none; font-size: 12px; font-weight: bold; }

Bom notem ali que eu negritei, algumas partes que são : width: 617px e  height: 282px e ali que você vai ajustar o tamanho do Slide bom e super fácil personaliza-lo pois ele não tem muitos códigos então você pode deixar ele da sua cara ;) Agora você vai colar o código a seguir e por aonde quer que o nosso slide apareça :

<div class="block-slider"> <div id="coin-slider"> <a href="/"> <img src="http://static.tumblr.com/kflakjl/3pMm985ry/slide1.png" ><span> Seu Titulo aqui bem Curto. </span> </a> <a href="/"> <img src="http://static.tumblr.com/kflakjl/92xm985z8/slide2.png" > <span> Seu Titulo aqui bem Curto. </span> </a> <a href="/"> <img src="http://static.tumblr.com/kflakjl/kH8m9869k/slide3.png" > <span> Seu Titulo aqui bem Curto. </span> </a> <a href="/"> <img src="http://static.tumblr.com/kflakjl/DMDm986e4/slide4.png" > <span> Seu Titulo aqui bem Curto. </span> </a> <a href="/"> <img src="http://static.tumblr.com/kflakjl/ajfm986rp/slide5.png" > <span> Seu Titulo aqui bem Curto. </span> </a> </div></div>

Bom notem ali que eu negritei aonde você deve por suas imagem e o seu Titulo 

IMPORTANTE: Não coloque mais que 5 Slide pois vai bagunçar tudo, e TODAS as suas imagens devem ter o mesmo tamanho

Bom e só isso xD Simples assim.