Bootstrap的Carousel实现垂直滚动效果

介绍了实现bootstrap里面carousel的垂直滚动的方法

Bootstrap的Carousel默认是水平滚动的,下面介绍实现其垂直滚动的方式,看代码:

html结构,相对于bootstrap,新增了vertical的class



css样式,设定.carousel.vertical 对应的一些控制class的效果和动画

.vertical .carousel-inner {
  height: 100%;
}

.carousel.vertical .item {
  -webkit-transition: 0.6s ease-in-out top;
     -moz-transition: 0.6s ease-in-out top;
      -ms-transition: 0.6s ease-in-out top;
       -o-transition: 0.6s ease-in-out top;
          transition: 0.6s ease-in-out top;
}

.carousel.vertical .active {
  top: 0;
}

.carousel.vertical .next {
  top: 100%;
}

.carousel.vertical .prev {
  top: -100%;
}

.carousel.vertical .next.left,
.carousel.vertical .prev.right {
  top: 0;
}

.carousel.vertical .active.left {
  top: -100%;
}

.carousel.vertical .active.right {
  top: 100%;
}

.carousel.vertical .item {
    left: 0;
}​

js代码,设定滚动的间隔

$('.carousel').carousel({
  interval: 3000
})

以上就可以顺利实现一个垂直滚动的Carousel

参考网址:

twitter-bootstrap-carousel-vertical-sliding

Carousel vertical Bootstrap slider

Nginx 错误[emerg] “server” directive is not allowed here的可能情况

Nginx 错误[emerg] “server” directive is not allowed here的可能情况:检测的配置文件不对

  • 服务器环境:ubuntu 14.04, nginx/1.4.6

  • 执行命令:sudo nginx -t -c /etc/nginx/conf.d/default.conf

  • 命令目的:查看新修改的nginx是否有错误,避免上线导致服务器出错

执行结果:

nginx: [emerg] "server" directive is not allowed here in /etc/nginx/conf.d/default.conf:1
nginx: configuration file /etc/nginx/conf.d/default.conf test failed

default.conf里面的内容:

server {
    listen                      80; 
    server_name                 localhostmanager.com www.shuizhongyueming.com;
    root                        /var/www/www.shuizhongyueming.com;

    location / { 
        index   index.html index.php;
    }   

    # 媒体资源文件
    # TODO: 用一个static.hostmanager.com 之类的域名放置
    location ~ .*.(gif|jpg|jpeg|png|bmp|swf)$ {
         expires      30d;
    }   

    # 前端代码
    # TODO: 用一个fe.hostmanager.com之类的域名放置
    location ~ .*.(js|css)$ {
         expires      1h; 
    }   
}

一开始以为是语法错误,可是复制了官方文档里面的一个简单PHP站点配置之后,还是报同样的错误,所以基本算排除了语法错误

上网Google的结果,大多说的是server的配置应该放在http里面

可是我的default.conf 是在/etc/nginx/nginx.conf 里面,在http模块下include的,不应该有任何的错误才对

最后自己根据网上这些答案猜测,是我进行语法检测的对象有问题。

要检测现有的修改过的Nginx配置是否有错误,不是单单检测那个修改过的扩展的.conf文件。而是不管任何时候,始终都是去检测主文件/etc/nginx/nginx.conf,只有这样,才能顺利的在对应的模块加载扩展的.conf文件。

这样一来保证了配置的前后语境的正确性,二来,这样才是真正的检测(完全和实际运行情况相符)

所以正确的检测修改的Nginx的语法是否错误的命令应该是:sudo nginx -t -c /etc/nginx/nginx.conf,然后一个欣喜的结果就会是:

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

希望这个小的发现能帮助到大家。