首页 \ 问答 \ CSS3内容滑块可以减少内容(CSS3 Content Slider cuts content off)

CSS3内容滑块可以减少内容(CSS3 Content Slider cuts content off)

我在CSS3中为图像创建了一个内容滑块。 我想创建一个纯CSS3滑块,没有任何Javascript或JQuery。 但是,我的图像以某种方式被“切断”。

你可以在这里看到问题。

HTML:

<div id="slider">
<img src="1.jpg" /><img src="1.jpg" /><img src="1.jpg" /><img src="1.jpg" />
</div>

CSS:

body {
    margin: 0;
}

#slider
{
    height: 200px;  
    width: 500px;
    padding: 0;
    margin: 0;
    position: relative;
    display: inline-block;  
    overflow: hidden;
    white-space: nowrap;
    transition: left .3s linear;
    -moz-transition: left .3s linear;
    -o-transition: left .3s linear;
    -webkit-transition: left .3s linear;
    -webkit-animation: slide-animation 25s infinite;
}

@-webkit-keyframes slide-animation {
    0% {left:0px; opacity:1;}
    20% {left:0px; opacity:1;}
    25% {left:-500px; opacity:1;}
    45% {left:-500px; opacity:1;}
    50% {left:-1000px; opacity:1;}
    70% {left:-1000px; opacity:1;}
    75% {left:-1500px; opacity:1;}
    100% {left:-1500px; opacity:0;}
}

任何帮助将非常感激!


I've created a content slider in CSS3 for images. I wanted to create a pure CSS3 slider, without any Javascript or JQuery. However, my images are somehow "cut off".

You can see the problem live here.

HTML:

<div id="slider">
<img src="1.jpg" /><img src="1.jpg" /><img src="1.jpg" /><img src="1.jpg" />
</div>

CSS:

body {
    margin: 0;
}

#slider
{
    height: 200px;  
    width: 500px;
    padding: 0;
    margin: 0;
    position: relative;
    display: inline-block;  
    overflow: hidden;
    white-space: nowrap;
    transition: left .3s linear;
    -moz-transition: left .3s linear;
    -o-transition: left .3s linear;
    -webkit-transition: left .3s linear;
    -webkit-animation: slide-animation 25s infinite;
}

@-webkit-keyframes slide-animation {
    0% {left:0px; opacity:1;}
    20% {left:0px; opacity:1;}
    25% {left:-500px; opacity:1;}
    45% {left:-500px; opacity:1;}
    50% {left:-1000px; opacity:1;}
    70% {left:-1000px; opacity:1;}
    75% {left:-1500px; opacity:1;}
    100% {left:-1500px; opacity:0;}
}

Any help would be much appreciated!


原文:https://stackoverflow.com/questions/21531027
更新时间:2020-01-26 02:51

最满意答案

您的容器宽度不足以容纳所有图像。

向左移动时,容器的右边框进入视图,无法看到图像。

实现此目的的另一种方法是改变第一个图像的边缘。

更新的codepen

CSS

#slider img:first-child {
    -webkit-animation: slide-animation 25s infinite;
}

@-webkit-keyframes slide-animation {
    0% {margin-left:0px; opacity:1;}
    20% {margin-left:0px; opacity:1;}
    25% {margin-left:-500px; opacity:1;}
    45% {margin-left:-500px; opacity:1;}
    50% {margin-left:-1000px; opacity:1;}
    70% {margin-left:-1000px; opacity:1;}
    75% {margin-left:-1500px; opacity:1;}
    100% {margin-left:-1500px; opacity:0;}
}

Your container has a width that is not enough to hold all the images.

When you move it to the left, the right border of the container enters in the view, and the images can not be seen.

Another way to achieve this can be changing the margin of the first of the images.

updated codepen

CSS

#slider img:first-child {
    -webkit-animation: slide-animation 25s infinite;
}

@-webkit-keyframes slide-animation {
    0% {margin-left:0px; opacity:1;}
    20% {margin-left:0px; opacity:1;}
    25% {margin-left:-500px; opacity:1;}
    45% {margin-left:-500px; opacity:1;}
    50% {margin-left:-1000px; opacity:1;}
    70% {margin-left:-1000px; opacity:1;}
    75% {margin-left:-1500px; opacity:1;}
    100% {margin-left:-1500px; opacity:0;}
}
2014-02-03

相关问答

更多

需要响应内容滑块(Need a responsive content slider)

查看http://www.swipejs.com/获取基于移动设备的滑动解决方案,或对http://www.woothemes.com/flexslider进行一些调整 Check out http://www.swipejs.com/ for a mobile based swipe solution, or make some adjustments to http://www.woothemes.com/flexslider

内容滑块问题(Issue with Content Slider)

css文件中的第132行引用“分页”图像路径。 如果位置已更改,则您需要更新该css文件。 防爆。 background-image:url(../img/pagination.png); 根据你上面所说的,它现在应该是: background-image:url(../../img/slider/pagination.png); Line 132 in the css file references a 'pagination' image path. If the loca ...

JQuery内容滑块?(JQuery Content slider?)

如果我理解好,你可以使用: var currentElemnt = $(".content").first(); //do something window.setTimeout(function(){ currentElement = currentElement.next(); //do something },5000); 这是超时5000毫秒。 I solved it like following, But I dont know is this the best way ...

CSS3从相同的起始位置翻译不同大小的内容(CSS3 Translating different sized content from same starting position)

您的系统现在要设置自下而上: .custom-smc .rsGCaption { bottom: -30px; } 并在悬停时将其向上移动 #new-royalslider-7:hover .rsGCaption { transform: translate(0,-30px); } 这很难适应不同大小的rsGCaption。 解决它的一种方法是使用可靠性来设置变换的百分比,而不是像素。 并将底部保留为0px,这是唯一一个独立于内容的已知位置: .rsGCaption { ...

CSS3内容滑块可以减少内容(CSS3 Content Slider cuts content off)

您的容器宽度不足以容纳所有图像。 向左移动时,容器的右边框进入视图,无法看到图像。 实现此目的的另一种方法是改变第一个图像的边缘。 更新的codepen CSS #slider img:first-child { -webkit-animation: slide-animation 25s infinite; } @-webkit-keyframes slide-animation { 0% {margin-left:0px; opacity:1;} 20% {margi ...

滑块内容随滑块移动(Slider content moving along with slider)

处理影响动画的属性时,您需要非常小心选择器。 .go-right div和.go-left div选择器正在影响.go-right和.go-left每个兄弟,而你可能只想让直接兄弟姐妹(幻灯片)受到影响,所以我用它们替换它们.go-right>div和.go-left>div : var theSlider = { track: document.querySelector('.m-tract-slider-wrapp'), // has to match `transition-du ...

将内容克隆到滑块(Cloning content to a slider)

实际上,它可能是一个完全不同的问题,可能与我在页面上有两个相同的滑块有关。 var w = $(window).width(); if (w < 769) { $('#programmeList').children('article').each(function () { var data = $(this).clone().html(); $('#slider ul').append('<li>' + data + '</li>') ...

纯css3图像滑块(Pure css3 image slider)

我建议你将无限图像滑块与纯CSS3 (用于多个图像之间的自动延迟/过渡)相结合, 如何使用jQuery / CSS3创建'滑入式图库面板'? (用于滑动部分)。 如果您需要更多详细信息,请告诉我 I would suggest you combine Infinite Image slider with pure CSS3 (for the automatic delay/transition between multiple images) with this How to create 'Sl ...

CSS3淡入内容之前/之后(CSS3 Fade In Before/After Content)

如果没有起点和终点,则元素不会变换或移动。 您要做的是设置您的article:after首先,然后还设置当您将鼠标悬停在文章上时应该是什么。 像这样: http : //jsfiddle.net/E8dNe/1/ article:after { content: '×'; position: absolute; top: 0; left: 0; width: 322px; height: 322px; background: # ...

响应内容滑块有时会削减过多的底部图像(Responsive content slider sometime cuts too much of the bottom off images)

幸运的是,你可以快速修复这个特殊的滑块。 这些元素设置为fixed在#slider-container .full-bg-image上的背景附件。 清除它,将显示整个图片。 然后,您应该能够使用背景位置更具体地针对移动设备进行对齐,或者仅将桌面使用的固定位置与媒体查询一起使用。 我不确定最好的力量是什么方法:) Luckily for you there is a quick fix on this particular slider. The elements are set to have a ...

相关文章

更多

最新问答

更多
  • 如何保护Solr只允许SELECT请求给用户并禁止其他任何东西?(How to secure Solr to allow SELECT request to only users and disallow anything else?)
  • XPath表达式无效/错误TFHpple SWIFT 1.2(XPath Expression not working/incorrect TFHpple SWIFT 1.2)
  • css3 3D变换不能平滑地制作动画(css3 3D transform doesn't animate smoothly)
  • 运行时错误'91'和Outlook.Application = <对象变量或没有设置块变量>?(Run-time error '91' & Outlook.Application = Object variable or With block variable not set?)
  • 慢的webservice问题(Slow webservice problem)
  • textview的不正确对齐方式(Improper alignment of a textview)
  • 在第一步“Hello World”中出现Java错误(Cannot run “Hello World” program in Eclipse)
  • 为什么十六进制地址是14个字符?(why the hex address is 14 character?)
  • 如何在Python中的不同类中使用变量?(How to use variable in different classes in Python?)
  • asp:GridView HYPERLINKFIELD - datanavigateurlformatstring中的asp代码(asp:GridView HYPERLINKFIELD - asp code inside datanavigateurlformatstring)
  • 关于adaboost算法(About adaboost algorithm)
  • 在Matlab上内置图像(Built in Images on Matlab)
  • java swing:输入键事件时焦点丢失(java swing: Focus lost on enter key event)
  • C#中的通用约束,T是相同的TSomethingElse,对吧?(Generic constraints in C#, T is the same TSomethingElse, right?)
  • 从mybatis中的光标获取数据(Fetching data from cursor in mybatis)
  • 在运行时从XML构建对象的最佳方法(Best way for building objects out of XMLs at runtime)
  • 在整个窗口中拉伸sf :: Sprite(Stretch sf::Sprite across entire window)
  • Selenium Node API Web驱动程序等待超时处理程序(Selenium Node API web driver wait timeout handler)
  • 函数使用并且是map的一部分(循环依赖?)(Function uses and is part of map (circular dependency?))
  • 是否可以在C ++ 14中使用可选模板参数创建类型元组?(Is possible to make a tuple of types with optional template parameters in C++14?)
  • PHP从窗帘后面打印/ f(PHP prints /f from behind the curtains)
  • JFrame的contentPane的LayoutManager(LayoutManager of JFrame's contentPane)
  • 用于Instagram Feed的图像滚动(Image Roll Overs for Instagram Feed)
  • 如何显示拉伸字体(双倍宽度/高度)?(How to display stretched font (double width/height)?)
  • 文件操作API在fileapi.h和stdio.h中的WP8差异?(WP8 differences between file manipulation APIs in fileapi.h and stdio.h?)
  • 保存失败后Rails没有回滚事务()(Rails not rolling back transaction after failed save())
  • jqgrid中的分页问题与数组数据(Pagination problem in jqgrid with array data)
  • 重定向时,通过其他页面上的URL调用javascript函数(Call javascript function through url on otherpage while Redirecting)
  • 如何使用InvokeCommandAction调用我的方法并传入参数?(How do I go about using InvokeCommandAction to call a method of mine and pass in parameters?)
  • Jquerymobile按钮仅显示页面的第一个外观(Jquerymobile buttons are shown only first apperance of the page)