如何创建CSS旋转木马(滑块)

米洛斯·詹库维奇
2016年9月13日

查看演示获取来源

今天,几乎所有网站都有某种转盘(滑块),而且通常使用一些开源JavaScript库(如BxSlider或Slick),这需要使用一些其他JavaScript库(如jQuery)。近来,谷歌宣布更多用户使用他们的手机而不是台式计算机进行搜索。这意味着用户正在移动的概率更高,并且它们没有快速且稳定的互联网连接。

从这个意义上讲,网站需要快速加载,没有许多外部库,它将减慢加载和块页面呈现。使用两个外部库(大约120 kB)创建旋转木马需要苛刻,因此我们将向您展示如何在CSS中创建旋转木马。

HTML.

代码看起来与您在使用JS Carousel时写入的代码相同,添加<输入类型=“收音机”>。对于每个幻灯片具有唯一ID的输入字段非常重要,需要与标签连接。

<! - 旋转木马控件 - > <输入类型=“无线电”名称=“Carousel”ID =“Carousel-1”检查/> <输入类型=“无线电”名称=“Carousel”ID =“Carousel-2”/> <输入类型=“收音机”名称=“Carousel”ID =“Carousel-3”/>

<! - 转盘导航 - > <标签=“carousel-1”>

<! - 旋转木马幻灯片 - > 幻灯片1 滑动2 幻灯片3

SCSS.

我们将在这里展示重要的零件,我们的全部SCS可在我们的github存储库

定义选项(以秒为单位的幻灯片数和转换速度):

$ css-casousel :(幻灯片:4,过渡速度:1s);

此部分非常重要,尽管隐藏,因为所示的幻灯片的检查输入控制。

//隐藏输入无线电字段输入[name =“carousel”] {显示:无;}

标签是我们的旋转木马导航,可以很好地样式,并切换检查的输入字段。

//旋转木马导航.carousel-nav {label {display:内联块;边缘:0 10px;宽度:20px;身高:20px;边框:2px solid #fff;边界半径:50%;光标:指针;过渡:背景颜色0.25s;}}

此代码将所有幻灯片放在一行中并隐藏所有非活动幻灯片。

//旋转木马滑梯。碳水丝滑动{宽度:100%;溢出:隐藏;.carousel-inner {宽度:( 100%* map_get($ css-casousel,幻灯片));转换:MARIN MAP_GET($ CSS-CAROUSEL,过渡速度);} .Carousel-Item {float:左;宽度:( 100%/ MAP_GET($ CSS-CAROUSEL,幻灯片));}}

主要技巧正在使用:检查伪类,指的是主动幻灯片和〜(波浪标志)这是指兄弟元素。由于此,我们能够标记主动导航点并移动幻灯片。

// Active Carousel导航@for $ i从1到Map_get($ CSS-Carousel,幻灯片){#carousel - #{$ i}:checked〜.carousel-nab label [for =“carousel - #{$ i}”] {背景 - 颜色:#fff;}} // Active Carousel幻灯片@For $ i从Map_get($ CSS-Carousel,幻灯片){#carousel - #{$ i}:checked〜.carousel-slides .carousel-inner {margin-left :( -100%*($ i-1));}}

我们使用SCSS来创建旋转木马,我们所需要的一切只是为了编辑幻灯片的数量,其他一切都将在编译过程中自动完成。

凡好

  • 没有大型外部图书馆的用法

  • 保存带宽和更快的网站加载

cons

  • 与本身识别幻灯片数量的JS Carousel不同,在CSS旋转木马开发人员中必须定义幻灯片数量。

浏览器兼容性

Chrome:任何Safari:3.2+ Firefox:4+ Opera:11.5+ IE / EDGE:10+ Android:任何IOS:任何

米洛斯·詹库维奇

前端开发人员,贝尔格莱德。