Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

Como colocar un scroll a este carrusel

Hola encontré este código porque quiero hacer un slider de contenido como un carrusel de texto con imágenes, se ve genial pero el pequeño inconveniente es que me gustaría poder poner mas contenido debajo de esta pero el carrusel me esta abarcando toda la pantalla y no logro poner mas nada debajo, me gustaría saber que puedo modificar y agregar para poder escribir otros contenidos debajo de esta, aquí esta el código completo.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[
         ul, li {
    padding: 0;
    margin: 0;
    list-style: none inside;
}
ul.slider {
    position:relative; /*Necesitamos que el ul sea relativo*/
}
ul.slider li {
    opacity: 0; /*Ocultamos todos los <li>*/
    transition: opacity .5s;
    position: absolute; /*Posicionamos en absoluto los <li>*/
    left: 0px;
    top: 0px;
    margin:50px;
    padding:50px;
    border:2px solid red;
    background:#fff;
}
ul.slider li:first-child {
    opacity: 1; /*Mostramos el primer <li>*/
}
ul.slider li:target {
    opacity: 1; /*Mostramos el <li> al que apunta el enlace*/
}
nav {
    position:relative;
    top:200px;
    left:50px;
}
body, html {
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
    overflow:hidden;
}
 
ul, li {
    box-sizing: border-box;
}
 
ul.slider {
    padding: 30px;
}
 
ul.slider li {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: gray;
    opacity: 0;
    transition: opacity .5s;
    padding-top: 30vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    font-size: calc( 1.5rem + 1vw );
    text-align: center;
}
 
#slide1 {
    background-color: #00324b;
    color: #fff;
}
 
#slide2 {
    background-color: #65bce8;
    color: #00324b;
}
 
#slide3 {
    background-color: #f90;
    color: #00324b;
}
 
#slide4 {
    background-color: #00324b;
    color: #65bce8;
}
 
#slide5 {
    background-color: #65bce8;
    color: #00324b;
}
 
#slide6 {
    background-color: #FDFEFE;
    color: #00324b;
}
 
#slide7 {
    background-color: #FDFEFE;
    color: #00324b;
}
 
#slide8 {
    background-color: #FDFEFE;
    color: #00324b;
}
 
nav {
    width: 100vw;
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    background: #f1f2f3;
}
 
nav ul {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
 
nav ul li {
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    box-sizing: border:box;
}
 
nav a {
    font-size: calc( 1.2rem + 1vw );
    text-decoration: none;
    font-weight: bold;
    color: #00324b;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.8;
    flex-grow: 1;
    text-align: center;
    border-top: 5px solid #00324b;
    border-right: 1px solid #00324b;
    flex-wrap: wrap;
    position: relative;
}
 
nav li:last-child a {
    border-right: 0;
}
 
nav a:hover {
    background-color: #00324b;
    color: #fff;
    border-top-color: #65bce8;
}
 
nav a:active {
    border-top-color: #f90;
    background: #f90;
    color: #00324b;
}
    ]]></b:skin>
  </head>
 
  <body>
    <b:section id='main' showaddelement='yes'/>
    <ul class='slider'>
    <li id='slide1'>En campusMVP</li>
    <li id='slide2'>encontrarás los mejores</li>
    <li id='slide3'>cursos online de programación</li>
    <li id='slide4'>y aprenderás de la mano</li>
    <li id='slide5'>de los mejores profesionales</li>
    <li id='slide6'>extra 6</li>
    <li id='slide7'>extra 7</li>
    <li id='slide8'>extra 8</li>
 </ul>
    <nav>
    <ul class='menu'>
        <li><a href='#slide1'>Diapositiva 1</a></li>
        <li><a href='#slide2'>Diapositiva 2</a></li>
        <li><a href='#slide3'>Diapositiva 3</a></li>
        <li><a href='#slide4'>Diapositiva 4</a></li>
        <li><a href='#slide5'>Diapositiva 5</a></li>
        <li><a href='#slide6'>Diapositiva 6</a></li>
        <li><a href='#slide7'>Diapositiva 7</a></li>
        <li><a href='#slide8'>Diapositiva 8</a></li>
</ul>
      </nav>
  </body>
</html>
0
Puntos
527
Visitas
2
Resp
Por Javenrod hace 9 meses
Principiante
Respuesta #1
ira esta pagina https://midu.dev/css-scroll-snap-la-solucion-definitiva-a-la-creacion-de-sliders-en-la-web-parte-ii/
a mi si me funciono.
______________
estudio la maestria tecnologias de la informacion
0
Puntos
Por carisma45 hace 8 meses
Principiante
Respuesta #2
Para poner un scroll a un div es muy sencillo, solamente tenemos que utilizar la propiedad overflow:scroll y asignar un tamaño determinado al div. En cuanto el contenido lo sobrepase saldrá automáticamente el scroll.
__________________________________________________________________________________________
Soy socio en Sube Agencia Digital | Yo así coloqué el mío.
0
Puntos
Por Rafamad435 hace 2 meses
Principiante
Compartir en facebook
Compartir en twitter
Compartir
Para comentar Inicia sesión o Registrate