Question

在我的主页上，我使用的是bootstrap改装的轮播滑块。我想从一边到另一边全屏。

我已经尝试过使用div类但是它使容器块保留在我编写<div class="container">的标题代码中。我想如果我使用if用于不同的主页，那么我可以帮助我制作一个全屏滑块。

那么有没有人建议如何制作全屏滑块？

HTML

<!doctype html>
<html <?php language_attributes(); ?>>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

        <meta charset="<?php bloginfo('charset'); ?>">
        <title> <?php bloginfo('name'); ?> <?php wp_title('|'); ?></title>
        <meta name="description" content="<?php bloginfo('description'); ?>">

        <?php wp_head(); ?>
    </head>

    <?php   if( is_front_page() ):
            $awesome_classes = array( 'awesome-class', 'my-class' );
        else:
            $awesome_classes = array( 'no-awesome-class' );
        endif;
        ?>

    <body <?php body_class( $awesome_classes ); ?>>

        <div class="row-fluid">

                    <nav class="navbar navbar-default">
                        <div class="container">

                      <div class="container-fluid">


                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>

                          </button>

                          <a  href="http://localhost/mysite/"><img src="wp-content/themes/blynas/img/Fotografas-klaipedoje-4.png" width="60" height="60"  alt=""></a>
                        </div>

                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <?php
                                wp_nav_menu(array(
                                    'theme_location' => 'primary',
                                    'container' => false,
                                    'menu_class' => 'nav navbar-nav navbar-right'
                                    )
                                );
                            ?>
                        </div>
                      </div><!-- /.container-fluid -->
                    </nav>

                </div>
    </div>
        </div>

            </div>
            <div class="container"

            </div>

            <img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />

Page Home

<?php
get_header(); ?>

<div class="row">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">

      <img src="wp-content/themes/blynas/img/Fotografas-klaipedoje2.jpg" alt="...">
      <div class="carousel-caption">
          <h3>Caption Text</h3>
      </div>
    </div>
    <div class="item">
      <img src="wp-content/themes/blynas/img/fotografas-klaipedoje1.jpg" alt="...">
      <div class="carousel-caption">
          <h3>Caption Text</h3>
      </div>
    </div>
    <div class="item">
      <img src="wp-content/themes/blynas/img/fotografas-klaipedoje.jpg" alt="...">
      <div class="carousel-caption">
          <h3>Caption Text</h3>
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div> <!-- Carousel -->

</div>
<script src="wp-content/themes/blynas/js/jquery-1.11.3.min.js"></script>
<script src="wp-content/themes/blynas/js/bootstrap.min.js"></script>






    <?php

    if( have_posts() ):

        while( have_posts() ): the_post(); ?>

            <h1>This is my Static Title</h1>

            <small>Posted on: <?php the_time('F j, Y'); ?> at <?php the_time('g:i a'); ?>, in <?php the_category(); ?></small>

            <p><?php the_content(); ?></p>

            <hr>

        <?php endwhile;

    endif;

    ?>
<?php get_footer(); ?>

Answer 1

请参阅此前发布的帖子：Bootstrap Carousel Full Screen

确保旋转木马所在的每个元素都设置为100％的宽度和高度，所以身体和html标签也是如此！

不同的主页不起作用

1 个答案: