图滑块＆＃34;堆栈＆＃34;

Question

我试图制作响应式CSS图像滑块，当我在<figure>块中放入5个以上的图像时，我遇到了麻烦。例如，当我想要将8个图像放入帧块时，第6个，第7个和第8个图像确实在下面第1个，第2个，第3个，第4个和第5个图像（非常奇怪的问题） 。以下是我所谈论的内容的更好表示：

我是游戏Dirty Bomb的粉丝，我正试图为它制作一个粉丝网站。我希望所有 HD Dirty Bomb背景成为我的滑块的一部分，但是有很多麻烦。这是它的样子：

http://imgur.com/a/Gt3WD

以下是滑块的代码（可以工作，但第6，第7和第8张图片始终位于底部！）：

HTML

<div class="slider">
    <figure>
        <img src="../img/bg/naderbg.png" alt>
        <img src="../img/bg/proxybg.png" alt>
        <img src="../img/bg/fletcherbg.png" alt>
        <img src="../img/bg/bushwackerbg.png" alt>
        <img src="../img/bg/sparksbg.png" alt>
        <img src="../img/bg/kirabg.png" alt>
        <img src="../img/bg/rhinobg.png" alt>
        <img src="../img/bg/artybg.png" alt>
    </figure>
</div>

CSS

.slider{
    overflow: hidden;
}

.slider figure{
    position:absolute;
    width:500%;
    margin:0;
    left:0;
    animation: 100s slidy infinite;
}

.slider figure img{
    width:20%;
    float:left;
}

@keyframes slidy{
    0%{left:0%;}
    10%{left:0%;}
    12%{left:-100%;}
    22%{left:-100%;}
    24%{left:-200%;}
    34%{left:-200%;}
    36%{left:-300%;}
    46%{left:-300%;}
    48%{left:-400%;}
    58%{left:-400%;}
    60%{left:-300%;}
    70%{left:-300%;}
    72%{left:-200%;}
    82%{left:-200%;}
    84%{left:-100%;}
    94%{left:-100%;}
    96%{left:0%;}
}

此外，相同的事情发生在本网站的 Dudley Storey 代码中。

如果你添加超过5张图片（例如你在他的代码中添加相同的图片），第6，第7，第8等将低于第1，第2，第3等等

https://codepen.io/dudleystorey/pen/ehKpi

我一直在努力解决这个问题。我一直在关注YouTube，互联网，Stack Overflow上的大量视频，但我无法找到解决方案。

Answer 1

您应将import React, { Component } from 'react'; import { AppRegistry, Text, Image, View, Button, StyleSheet, TextInput, Linking, Alert, Navigator } from 'react-native'; import t from 'tcomb-form-native'; const Form = t.form.Form; // here we are: define your domain model const Email = t.subtype(t.Str, (email) => { const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return reg.test(email); }); const LoginFields = t.struct({ username: Email, // a required string password: t.String, // a required string }); const options = { fields: { password: { type: 'password', placeholder: 'Password', error: 'Password cannot be empty' }, username: { placeholder: 'e.g: abc@gmail.com', error: 'Insert a valid email' } } }; // optional rendering options (see documentation) export default class Login extends Component { _onSubmit() { const value = this.refs.form.getValue(); if (value) { // if validation fails, value will be null console.log(value); // value here is an instance of LoginFields } this.props.navigator.push({ id: 'Home' }); } render() { return ( <View style={styles.container}> <View style={styles.header}> </View> <View style={styles.content}> <Text style={styles.contentHeader}> Pateast Login </Text> <View style={styles.loginFormContent}> <Form ref="form" type={LoginFields} options={options} /> <Text style={{color: 'blue', marginBottom: 10}} onPress={() => Linking.openURL('https://www.google.co.in')}> Forgot Password? </Text> <Button onPress={this._onSubmit.bind(this)} title="Login" color="#008080" accessibilityLabel="Ok, Great!" /> </View> </View> <View style={styles.footer}> </View> </View> ); } } const styles = StyleSheet.create( { container: { flex: 1 }, contentHeader: { fontFamily: 'sans-serif-condensed', fontWeight: 'bold', fontSize: 40, alignSelf: 'center', marginBottom: 30 }, header : { flex: 0.5, backgroundColor: '#008080' }, content: { flex: 10, backgroundColor: '#f8f8ff', justifyContent: 'center' }, loginFormContent: { marginHorizontal: 20 }, footer: { flex: 0.5, backgroundColor: '#008080' }, loginText: { fontSize: 20, marginBottom: 10 }, inputFields: { fontSize: 20, borderStyle: 'solid', borderColor: '#000000', borderRadius: 30, marginBottom: 10 } } ) 的宽度设置为.slider figure（8张图片为800％）并将100% * images count设置为.slider figure img（8张图片为12.5％）：

100% / images count